转自:http://www.qianduan.net/useful-nth-child-recipies.html ,仅借学习
当我想要完美的使用:nth-child或者:nth-of-type的时候有点儿头晕。你越理解它们,就能写出越好的CSS规则!
在这些简单的”秘方”(实际上是表达式)中我将重复的使用一个简单的列表并随即选择数字。但是很明显很容易改变它们以获得类似的选择器。
只选择第五个元素
1
2
3
|
li:nth-child(5){
color: green;
}
|
要选择第一个元素,你可以使用:first-child,或者我相信你也可以改下上面的例子来实现。
选择除了前面的五个之外的所有元素
li:nth-child(n+6){
color: green;
}
如果有超过10个元素,它将会选中超过5个。
只选择前面的5个
1
2
3
|
li:nth-child(-n+5){
color: green;
}
|
从开始的那个,选择每第四个
1
2
3
4
|
li:nth-child(4n-7) {
/* or 4n+1 */
color: green;
}
|
选择奇数或者偶数
1
2
3
|
li:nth-child(odd){
color: green;
}
|
1
2
3
|
li:nth-child(even){
color: green;
}
|
当然这里也有另外两种实现,你懂的——神飞
选择最后一个元素
1
2
3
|
li:last-child {
color: green;
}
|
选择倒数第二个
1
2
3
|
li:nth-last-child(2){
color: green;
}
|
从这个例子可看出,上面那个例子也有第二种实现方法。
浏览器支持
有趣的是,:first-child 和:last-child被IE 7支持,但是知道IE9才支持剩下的选择器。如果你担心IE,可以使用Selectivizr。如果你浏览器兼容性对你很重要,请关注When can I use…
嗯,使用CSS3选择器是件很有趣的事情,像做简单的数学题一样。
更多关于CSS3选择器,请查阅:征服高级CSS选择器
*************************************************
结合自己的例子,jsp:include和jsp:param
leftmenu.jsp页面
<dl class="sidemenu">
<dt><a href="javascript:void(0)">账户管理</a></dt>
<dd><a href="${base}/orderlist.html">我的订单</a></dd>
<dd><a href="${base }/vcoinlist.html">V币账户</a></dd>
<dd><a href="${base }/giftlist.html">我的礼券</a></dd>
<dd><a href="${base }/scorelist.html">我的积分</a></dd>
<dd><a href="${base }/security.html">安全设置</a></dd>
</dl>
<script type="text/javascript">
$(function(){
$(".sidemenu dd:nth-child("+${param.curSel}+")").addClass("current").siblings().removeClass("current");
});
</script>
scorelist.jsp
<div id="leftside">
<jsp:include page="/WEB-INF/account/include/leftmenu.jsp" >
<jsp:param value="2" name="curSel" />
</jsp:include>
</div>
分享到:
相关推荐
我是第1个p标签 我是第2个p标签</p> <!-- 希望这个变红 --> 然后两个选择器相对应的CSS代码如下: ...p:nth-child(2) { color: red;...对于:nth-child选择器,在简单白话文中,意味着选择一个元素:
本文实例讲述了jQuery中:nth-child选择器用法。分享给大家供大家参考。具体分析如下: 此选择器匹配其父元素下的第N个子或奇偶元素。 :eq(index)选择器只匹配一个元素,而:nth-child选择器将为每一个父元素匹配子...
今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”。 语法: :nth-child(an+b) 为什么选择她,因为我认为,这个选择器是最多学问的一个了。很可惜,据我所测,目前能较好地支持她的只有Opera9+和Safari...
关于:nth-child和:nth-of-type的区别之前一直没太注意。最近打算深入了解一些CSS3,才发现里面其实暗藏玄机。 :nth-child可以选择父元素下的字元素,:nth-of-type也可以。但是它们到底有什么区别呢? 其实区别很...
但两者是存在差异的 :nth-child 选择器,在此例子中意思就是指 1.首先是个p元素 2.其次这个p元素是其父元素的第二个孩子 :nth-of-type 选择器,在此例子中意思就是指 1.定位一个父元素下的第二个p元素 :nth-of-type
一、代码 <style> ul{list-style: none} ...div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <li>11 <li>22 <li>33 二、预览效果 如上图
面对更多的兼容性问题,今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。 CSS3的强大,让人惊叹,人们在惊喜之余,又不得不为其艰难的道路感到可惜:好的标准只有得到行业浏览器的良好支持才算得上...
css3的强大,让人惊叹,今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式,具体的详细示例可以参考下文,希望对大家有所帮助
table tr th:nth-child(2) </style> <table> <tr> 第一个</th> 第二个</th> 第三个</th> </tr> </table> 定义: :nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N (这里选择第2个)个子元素...
CSS3选择器--结构化伪类选择器;结构化伪类选择器;结构化伪类选择器;...:nth-child(n)和:nth-last-child(n)选择器;:nth-of-type(n)和:nth-last-of-type(n)选择器;:empty选择器;:target选择器;总结;;THANKS
CSS3中nth-child与nth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素, 而ele:nth-child(n)是指父元素下第n个...
对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。(EG) li:nth...
.box:hover ol li:nth-child(2){ -webkit-transform:rotateX(180deg) translateZ(300px); width: 400px; height: 400px; opacity: 0.8; left: -100px; top: -100px; } .box:hover ol li:nth-child(3){ -...