演示的HTML结构:
<div class="demo">
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
<p>p9</p>
<p>p10</p>
</div>
:nth-child(n)(选择某个元素的指定的子元素 重头戏!!!)
兼容IE9以上
这里的n代表的是选择某个,默认是0(相当于选择全部),只能是n这个字母
常用用法:
.demo p:nth-child(2){color: yellow} /* p2的颜色会变黄 */
强大用法:
n还可以这样子用:
n+2: 表示从第二个元素开始
-n+2: 表示反选的意思 这里是选中1 2个
2n 表示隔2个就选中
4n+1: 表示每隔2个就选择第一个 来个区间表示可能更直观一点: 把1、2、3、4、5、6、7、8、9、10 分成3个区间:[1,2,3,4] [5,6,7,8] [9, 10]然后4n+1的意思是选择每个区间的第一个 得出: 1 5 9;
4n+2: 就是选择每个区间的第二个 得出 2 6 10;
4n-1: 就是选择每个区间的倒数第二个(可以把区间看成一个数组,下标是0开始就好理解多了)和4n+3是一样的效果 得出 3 7;
以此类推吧
.demo p:nth-child(n+4){color: red} /*p4-p10会变红色*/
.demo p:nth-child(-n+4){color: red} /*p1-p4会变红色*/
.demo p:nth-child(4n){color: red} /*p4、p8会变红色*/
.demo p:nth-child(4n+1){color: red} /*p1、p5、p9会变红色*/
.demo p:nth-child(4n-1){color: red} /*p3、p7会变红色*/
:nth-last-child(n) (用法和nth-child一样,不过计算方式是最后一个开始)
兼容IE9以上
.demo p:nth-last-child(2){color: yellow} /* p9的颜色会变黄 */
:first-child(选择某个元素的第一个子元素)
兼容IE7以上
.demo p:first-child{color: red} /* p1的颜色会变红 */
:last-child(选择某个元素指定最后一个子元素)
兼容IE9以上
.demo p:last-child{color: yellow} /* p10的颜色会变黄 */
以上是对CSS3 nth的一个总结,还有其他一些伪类,个人感觉很少用到所以就不详细写出来了,就简单说下吧:
下面的说明是从大漠老师那里复制过来的CSS3 选择器——伪类选择器 这篇文章给了我很大的启发,推荐可以去读下
- :nth-of-type() 选择指定的元素;
- :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
- :first-of-type选择一个上级元素下的第一个同类子元素;
- :last-of-type选择一个上级元素的最后一个同类子元素;
- :only-child选择的元素是它的父元素的唯一一个了元素;
- :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
- :empty选择的元素里面没有任何内容。
逃~~~~