如何用CSS:nth-child(n)结合等差数列定位技巧精确选择元素？
- 内容介绍
- 文章标签
- 相关推荐
本文共计1171个文字，预计阅读时间需要5分钟。
很多人写 `div:nth-child(2)` 想选择第二个 `div`，但结果没生效——因为 `:nth-child(n)` 看的是父元素下的第 n 个子元素，而不是第 n 个匹配的元素。它不会跳过不匹配的兄弟节点。
比如：
<ul>
<li>标题</li>
<p>一段说明</p>
<li>第一项</li>
<li>第二项</li>
</ul>此时 li:nth-child(2) 完全不匹配，因为第 2 个子元素是 <p>，不是 li；li:nth-child(3) 才匹配第一个 li（“第一项”）。
本文共计1171个文字，预计阅读时间需要5分钟。
很多人写 `div:nth-child(2)` 想选择第二个 `div`，但结果没生效——因为 `:nth-child(n)` 看的是父元素下的第 n 个子元素，而不是第 n 个匹配的元素。它不会跳过不匹配的兄弟节点。
比如：
<ul>
<li>标题</li>
<p>一段说明</p>
<li>第一项</li>
<li>第二项</li>
</ul>此时 li:nth-child(2) 完全不匹配，因为第 2 个子元素是 <p>，不是 li；li:nth-child(3) 才匹配第一个 li（“第一项”）。