根据http://nthmaster.com/ http://nthmaster.com/，当通过 nth-child 设置一系列元素的样式时，我们必须这样做：
:nth-child(n+4):nth-child(-n+8)
如果我们只使用一个:nth-child()，然后我们看到它按照该公式设置所有元素的样式。
这两个分别如何:nth-child()选择器会取消对方对超出范围的元素的影响吗？
以这种方式组合简单的选择器仅仅意味着您正在寻找同时匹配所有给定条件的元素。组合伪类与组合其他类型的简单选择器没有什么不同，例如div.example or input[type="checkbox"]:checked.
So :nth-child(n+4):nth-child(-n+8)只是意味着任何元素both :nth-child(n+4) and :nth-child(-n+8)。当单独使用时，这只能是任一选择器的匹配的子集。
这就是您获得一系列元素的方式。
你如何知道哪些元素将被匹配？简单：查看每个 An+B 表达式中的 B：
-
:nth-child(n+4)匹配从 4 号（含 4 号）开始的孩子
-
:nth-child(-n+8)匹配 8 号以下的儿童
这一切是如何工作的已经在您链接到的网站中进行了说明，但是前面的示例使用:nth-child(n+6) and :nth-child(-n+9)分开来说，这可能有点令人困惑。这是一个更一致的示例来说明两个选择器如何组合（忽略::before/::after/contentCSS 中的位 — 只需关注输出）：
li::before {
content: 'li';
}
li:nth-child(n+4)::before {
content: 'li:nth-child(n+4)';
}
li:nth-child(-n+8)::after {
content: ':nth-child(-n+8)';
}
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
