gpt4 book ai didi

html - 如何在 css 中使用 nth-of-type 而不重启

转载 作者:太空宇宙 更新时间:2023-11-04 03:34:33 25 4
gpt4 key购买 nike

我有以下 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","re​​d"); 或更好,如果您的内容是通过 PHP 或一些东西,使用计数变量将这些元素标记为特定的类,然后在 CSS 中的这些类名中定义颜色。

关于html - 如何在 css 中使用 nth-of-type 而不重启,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25751534/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com