css3 新增的:nth-child(n)
选择器您真的理解吗?
:nth-child(n)
:用来选择某个父元素的一个或多个特定的子元素。其中 n 是一个参数,代表了你想要选择的子元素的序号。这里的 n 可以是以下几种形式:
/*1:具体的数字:*/
li:nth-child(3){
/*
选择父元素的第三个子元素。
这里的子元素的索引从1开始计算,当表达式的值为0或小于0的时候,不选择任何匹配的元素。*/
background-color:#c00;
}
/*2: 表达式(2n)*/
li:nth-child(2n){
/*表示 n从0开始和前边的数字进行乘法运算,然后选中计算结果的第几个子元素,
例如 :nth-child(2n) 会选择父元素的 2*0即第 0 个但是这里的元素的索引是从 1 开始的所以没有匹配项,
2*1即第2个、2*2 即第4个、2*3 即第6个...等,也可以理解为前边数字的倍数。*/
}
/*3:表达式(n+a) */
li:nth-child(n+5){
/*这里的a 取值为大于等于 0 的整数。
比如 n+5:表示第5个及其之后的元素:(0+5)=5、(1+5)=6、(2+5)=7,等等一直到最后一个。*/
}
/*4:表达式(-n+a) */
li:nth-child(-n+5){
/*这里的a 取值为大于等于 0 的整数。
比如 -n+5:表示第5个及其之钱的元素:(0+5)=5、(-1+5)=4、(-2+5)=3,等等一直到第一个。*/
}
/*5: 表达式:(an+b)*/
li:nth-child(2n+5){
/*其中a的取值为:0、负整数数、正整数;
b取值为:大于等于0的整数;
2n+5 表示 2*0+5=5、 2*1+5=7 、 2*2+5=9、 2*3+5=11、.... 等子元素被选中
*/
}
li:nth-child(-2n+5){
/*
-2n+5 表示 -2*0+5=5、 -2*1+5=3 、 -2*2+5=1、 -2*3+5=-1、.... 等子元素被选中
因为子元素索引是从 1 开始的,所以计算出小于等于 0 的值将无法选中
*/
}
/*6: 表达式:(an-b)*/
li:nth-child(2n-5){
/*其中a的取值为:0、正整数;
b取值为:大于等于0的整数;
2n-5 表示 2*0-5=-5、 2*1-5=-3 、 2*2-5=-1、 2*3-5=1、 2*4-5=3、.... 等子元素被选中
*/
}
/*7: 关键字 odd、 even*/
li:nth-child(odd){
/*会选择所有奇数位置的子元素
1、3、5、7、9、.....
*/
}
li:nth-child(even){
/*会选择所有偶数位置的子元素
2、4、6、8、10、.....
*/
}