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
的新语法需要比较新的浏览器支持
文章来源:https://www.toymoban.com/news/detail-608128.html
谢谢你看到这里😊文章来源地址https://www.toymoban.com/news/detail-608128.html
到了这里,关于CSS :nth-child的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!