管局审核网站名称,往网站添加图片吗,wordpress主题知更鸟lts,杭州seo俱乐部文章目录 一、简单数字序号写法:nth-child(number)二、倍数写法:nth-child(an)三、倍数分组匹配:nth-child(anb) 与 :nth-child(an-b)四、反向倍数分组匹配:nth-child(-anb)五、奇偶匹配:nth-child(odd) 与 :nth-child(even) :nth-child(n) 选择器匹配属于其父元素的第 N 个子元… 文章目录 一、简单数字序号写法:nth-child(number)二、倍数写法:nth-child(an)三、倍数分组匹配:nth-child(anb) 与 :nth-child(an-b)四、反向倍数分组匹配:nth-child(-anb)五、奇偶匹配:nth-child(odd) 与 :nth-child(even) :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素不论元素的类型 :nth-of-type(n) 匹配同类型中的第n个同级兄弟元素 区别 nth-child(n) : 匹配父元素中的第 n 个子元素元素类型没有限制。 nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。 n可以是一个数字一个关键字或者一个公式比如nth-child(odd) 奇数 ,nth-child(even) 偶数。 nth-child和nth-of-type的不同之处就是查找元素的方式不同。前者是查找兄弟元素中某个绝对位置的元素后者是查找同类型元素中某个绝对位置的元素。 相同都是找到元素之后再与前面的选择符进行匹配这里的匹配方式是一样的。 一、简单数字序号写法:nth-child(number) :nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。 /* 把第3个LI的背景设为橙色 */
li:nth-child(3){background:orange;
} 二、倍数写法:nth-child(an) :nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省它是倍数写法的标志如3n、5n。 /* 把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色 */
li:nth-child(3n){background:orange;
}三、倍数分组匹配:nth-child(anb) 与 :nth-child(an-b) :nth-child(anb) 与 :nth-child(an-b)先对元素进行分组每组有a个b为组内成员的序号其中字母n和加号不可缺省位置不可调换这是该写法的标志其中a,b均为正整数或0。如3n1、5n1。但加号可以变为负号此时匹配组内的第a-b个。其实an前面也可以是负号但留给下一部分讲。 /* 匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n1){background:orange;
}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI */
li:nth-child(3n5){background:orange;
}/*匹配第5-14、第10-19、…、第5的倍数减1个LI*/
li:nth-child(5n-1){background:orange;
}/*相当于(3n)*/
li:nth-child(3n±0){background:orange;
}/*相当于(3)*/
li:nth-child(±0n3){background:orange;
}四、反向倍数分组匹配:nth-child(-anb) :nth-child(-anb)此处一负一正均不可缺省否则无意义。这时与:nth-child(an1)相似都是匹配第1个但不同的是它是倒着算的从第b个开始往回算所以它所匹配的最多也不会超过b个。 /*匹配第8、第5和第2个LI*/
li:nth-child(-3n8){background:orange;
}/*或(-n8)匹配前8个包括第8个LI这个较为实用点用来限定前面N个匹配常会用到*/
li:nth-child(-1n8){background:orange;
}五、奇偶匹配:nth-child(odd) 与 :nth-child(even) :nth-child(odd) 与 :nth-child(even)分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n1)结果一样偶数(even)与(2n0)及(2n)结果一样。 //偶数行
.table tr:nth-child(even) td {background-color: #ccc;
} //奇数行
.table tr:nth-child(odd) td {background-color: #ccc;
}
