如何理解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()等。

• 第1页
• 第2页
• 第3页
• 第4页
• 第5页
• 第6页

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;
} 

• 第1页
• 第2页
• 第3页
• 第4页
• 第5页
• 第6页

总结

总结上来说的话，本文中涉及的nth系列的伪类选择器dom:nth-child()，简化为A:B的话，理解上就是：A的父元素中的条件B的子元素，同时还要符合条件A。而不是：A的父元素的符合A的元素中，符合第B个子元素的。

理解上，可能有些绕。其实，就是条件的优先级别的问题。优先级别不同，最终受到css影响的元素，就是不同的。更多css使用技巧，请参考苏南大叔的博客文章，谢谢～

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留链接作者。

本站的忠实读者小伙伴，正在阅读下面这些文章：

• 如何免费申请ssl证书？sslforfree免费证书申请攻略
• window.name 跨域隐式传递消息原理解析
• chrome如何一键清除历史记录及页面缓存
• 战斗民族程序员也有seo，也有蜘蛛池
• chrome利用开发者模式安装无签名插件