在第n个孩子

Question

如何使用CSS在给定:nth-child()之后选择元素？

div:nth-child(1) + p { font-size: 40pt; }

不适合我，我很困惑。

https://jsfiddle.net/3mfygmjj/1/

Answer 1

div:nth-child(3) > p { font-size: 40pt; }

将选择div中的每个p标签：nth-​​child（3）作为直接后代。

div:nth-child(3) p { font-size: 40pt; }

将选择div中的每个p标签：nth-​​child（3），即使在dom中嵌套多个级别也是如此。在这种情况下，div：nth-​​child（3）和p之间的空格是重要的字符。

div:nth-child(3) + p { font-size: 40pt; }

将选择一个p标签，它是div：nth-​​child（3）之后的第一个元素，位于相同的dom级别（不在其他元素内）。

div:nth-child(3) ~ p { font-size: 40pt; }

将在同一dom级别的div：nth-​​child（3）之后选择每个 p标签。

Answer 2

如果您想在nth-child(3)之后选择一个，为什么不选择nth-child(4)？ 直接在孩子后尝试nth-child(3) + div。

之后为每个孩子尝试nht-child(3) ~ div

关于粉碎杂志的更多内容：https://www.smashingmagazine.com/2009/08/taming-advanced-css-selectors/#2-child-selector