CSS :nth-child
:nth-child 伪类根据元素在同级元素中的位置来匹配元素.
- CSS :nth-child
- 语法
- 值是关键词 odd/even
- An+B
- 最新的 [of S] 语法
- 权重
- 浏览器兼容性
- 语法
很简单的例子, 来直觉上理解这个伪类的意思
<ul>
<li class="me">Apple</li>
<li>Banana</li>
<li class="me">Peach</li>
</ul>
<ul>
<li>Apple</li>
<li class="me">Banana</li>
<li class="me">Peach</li>
</ul>
.me:nth-child(1) { background-color: salmon; }
你也许会奇怪🤔, 为什么下边一组的 Banana 背景不是红色呢? 因为 .me:nth-child(1) 表示选中同级元素中的第一个元素并且该元素 class 包含 me✅, 注意不是选中第一个 class 包含 me 的元素. 所以, 如果同级元素中的第一个元素的 class 不包含 me, 也不会选中.
语法
在 :nth-child() 语法中, 统计的元素包含同级的任何类型元素.
:nth-child() 的完整语法如下, ? 前面的 [] 中内容表示可选, 稍后会介绍这种最新的部分. :nth-child() 只接受一个参数, 该参数描述匹配同级元素的模式, 元素索引从 1 开始, 注意不是 0.
:nth-child(<nth> [of S]?) { ... }
值是关键词 odd/even
odd: 表示在同级元素中奇数位置的元素: 1、3、5…even: 表示在同级元素中偶数位置的元素: 2、4、6…
比如, 在一个表格中我们希望相邻行的背景颜色不同, 这样方便阅读, 就可以这样写
tr:nth-child(even) { background-color: azure; }
<table border="1">
<thead>
<tr>
<th>NAME</th><th>AGE</th> <th>COUNTRY</th>
</tr>
</thead>
<tbody>
<tr>
<td>Levi</td> <td>18</td> <td>China</td>
</tr>
<tr>
<td>June</td> <td>23</td> <td>USA</td>
</tr>
<tr>
<td>JiaXin</td> <td>20</td> <td>China</td>
</tr>
<tr>
<td>Mike</td> <td>22</td> <td>UK</td>
</tr>
</tbody>
</table>
An+B
不论是 odd 还是 even, 他们都是更普遍表达的特殊情况的简便写法. 使用 An+B 这种记号你可以自由定制你的匹配规则
A: 整数步长n: 非负整数, 从0开始B: 整数偏移量
为什么我们说 odd/even 是 An+B 特殊取值时的简便写法呢? 因为
odd->:nth-child(2n+1)even->:nth-child(2n)
下面我们就看看 An+B 取不同值的特定用法吧
:nth-child(2): 表示第二个元素
.two:nth-child(2) { background-color: salmon; }
<ul class="flex-1">
<li class="two">1</li>
<li class="two">2</li>
<li class="two">3</li>
</ul>
<ul class="flex-1">
<li class="two">1</li>
<li class="two" hidden>2</li> <!-- !!! -->
<li class="two">3</li>
</ul>
从上图中可以看到, 左边的符合我们的预期, 第二个元素并且 class 是 two 的元素背景红了, 但是左边的好像不太行, 因为 display 为 none 的元素也被考虑进来了!!!
-
:nth-child(3n): 表示第3、6、9…个元素.
-
:nth-child(n+5): 表示第5、6、7、8、9…个元素. 也就是第五个和后面的元素.
-
:nth-child(-n+3): 表示第1(-2+3)、2(-1+3)、3(-0+3)个元素. 如果n的值继续增加, 就会选中第0、-1、-2…个元素, 负数位置的元素不存在并且元素是从 1 开始索引的.
-
:nth-child(4n+1): 表示第1、5、9…个元素
-
:nth-child(n): 表示每一个元素 -
:nth-child(1): 表示第 1 个元素, 是n为 1 更特殊的情况
.n:nth-child(n) {
background-color: salmon;
}
.n:nth-child(1) {
border-width: 3px;
}
:nth-child(n+3):nth-child(-n+5): 表示第3、4、5个元素. 用于选择一个具有上下限范围内的元素
最新的 [of S] 语法
目前 :nth-child() 只能选择特定位置的元素, 比如 .name:nth-child(-n+3) 只能选择元素中 class 包含 name 的并且是所有元素中的前三个元素. 但是, 如果我们想要选择前三个 class 包含 name 的元素呢? 那就是最新的 of S 语法
下面的例子
.class1 > .item:nth-child(-n+3 of .name) {
background-color: salmon;
}
<ul class="class1">
<li class="name item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
<li class="name item">6</li>
<li class="item">7</li>
<li class="item">8</li>
<li class="name item">9</li>
<li class="name item">10</li>
</ul>
📖一定要留意两者的不同哦.
你可能问新的语法有什么用呢, 当然有用啦, 比如我们在给表格添加间隔背景时, 如果出现一行元素被隐藏的情况, 会出现什么效果呢?
tr:nth-child(even) {
background-color: azure;
}
<tbody>
<tr></tr>
<tr hidden></tr>
<tr></tr>
<tr></tr>
</tbody>
哇! 被隐藏的那一行也被考虑进入了, 按理说应该只有第二行(JiaXin)才有阴影的, 怎么办呢? 使用 of S. 我们不是要选择偶数行, 而是要选择所有 hidden 为 false 的偶数行.
tr:nth-child(even of :not([hidden])) {
background-color: azure;
}
权重
:nth-child() 的权重是单个伪类的权重. 如果使用 of S 语法, 那么就是单个伪类的权重加上 S 中权重最高的权重值.
<div>
<div id="country1" class="country1">CHINA</div>
</div>
.country1:nth-child(1) {
color: blue; /** WIN */
}
.country1 {
color: red;
}
如果我们再加一个呢?
:nth-child(1 of #country1.country1) {
color: green; /** WIN */
}
浏览器兼容性
根据 MDN, of S 的新语法需要比较新的浏览器支持
谢谢你看到这里😊
