如何理解css中的nth-child选择器?如何选择奇数行偶数行?
发布于 作者:苏南大叔 来源:程序如此灵动~在本文中,苏南大叔讲述的是css3
中的nth
系列伪类选择器。这个特性在那些古董级别的浏览器上面,是不支持的。但是都9012年了,主流浏览器都是支持这个css3
的nth
伪类选择器的。对于一些xp
用户,这里就只能说sorry了。
本文测试环境:chrome@78.0.3904.97
,mac
。本文中涉及的伪类选择器有:first-chlid
、last-child
、nth-child()
、nth-last-child()
等。
nth-child(n)
、nth-last-child(n)
这两个选择器,都必须添加上一个n
才是完整的。并且,是否生效,与其前缀有重要关系。
div:nth-child(1){
background: red;
}
p:nth-last-child(1){
background: blue;
}
nth-child(n)
,从前往后数,第N个某元素。nth-last-child(n)
,从后往前数,第N个某元素。- 首要条件:符合父元素的第
n
个子元素的前提下, - 次要条件:还需要符合冒号前面的
某元素
这个条件。这条限制,可以是#id
,也可以是.class
。
请看苏南大叔准备的下面的例子。
<style>
div,p{
width:36px;
height:36px;
margin:0px;
padding:0px;
text-align: center;
line-height: 36px;
vertical-align: middle;
float:left;
margin-right:1px;
border:1px solid gray;
color:#fffff;
font-weight: bold;
background: gray;
}
</style>
<div class="first">1</div>
<p>2</p>
<div>3</div>
<p>4</p>
<div>5</div>
<p id="last">6</p>
div:nth-child(1){
background: red;
}
p:nth-last-child(1){
background: blue;
}
.first:nth-child(1){
background: red;
}
#last:nth-last-child(1){
background: blue;
}
div:nth-child(1){
background: red;
}
p:nth-child(1){
background: blue;
}
总结
总结上来说的话,本文中涉及的nth
系列的伪类选择器dom:nth-child()
,简化为A:B
的话,理解上就是:A的父元素中的条件B
的子元素,同时还要符合条件A
。而不是:A
的父元素的符合A
的元素中,符合第B
个子元素的。
理解上,可能有些绕。其实,就是条件的优先级别的问题。优先级别不同,最终受到css
影响的元素,就是不同的。更多css
使用技巧,请参考苏南大叔的博客文章,谢谢~


本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
《程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。
本站的忠实读者小伙伴,正在阅读下面这些文章: