我有以下 html 片段
<body>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span><br />
</p><p>
<span>morbi id vestibulum lectus. maecenas facilisis orci vitae</span><br />
<span>urna pulvinar cursus. etiam id laoreet metus. cras vitae</span><br />
<span>elit ipsum. donec a sagittis nisi. sed nec nisi nibh,</span><br />
<span>fringilla fermentum quam. vestibulum lorem felis, gravida</span><br />
<span>et faucibus ac, ultrices nec lectus.</span>
</p>
</body>
我的CSS如下
span:nth-of-type(3n+1) {
color:red
}
span:nth-of-type(3n+2) {
color:green
}
span:nth-of-type(3n+3) {
color:blue
}
我希望第二个 span(“morbi id...”)以绿色着色，所有其余 span 元素遵循 reg-green-blue 序列。但是，由于 span 在 p 元素内，它是颜色为红色，因为第 nth-of-type 考虑了与父元素相关的顺序。我如何在 css 中实现这一点？
最佳答案
那是不可能的。 由于 :nth-child 和 :nth-of-type 或与这两个类似的其他变体都直接与它们的 parent 相关，因此您不能跳过他们的直接 parent 来搜索下一个匹配项。 “ child ”这个名字本身指的是他们只对直系 sibling 起作用。
您可以使用 JQuery 实现效果，例如
$("body span:eq(0), body span:eq(3)").css("color","red"); 或更好，如果您的内容是通过 PHP 或一些东西，使用计数变量将这些元素标记为特定的类，然后在 CSS 中的这些类名中定义颜色。
关于html - 如何在 css 中使用 nth-of-type 而不重启，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25751534/