CSS :not 选择器不忽略下一个选择器

Question

当 <p> 上面的标签不属于某个 class 时，我有一个样式可以应用，例如：

:not(.someclass) + p {
    color: yellow
}

这适用于以下情况：

<h3 class="someclass">title</h3>
<p>This does not have the style applied</p>
<p>This has the style applied</p>

令我烦恼的是，当 <p> 上方没有标签时，我想要应用样式，但它没有应用，例如：

<p>This should have the style applied but it doesn't</p>

您如何修正 CSS 以涵盖这两种情况？

Answer 1

只有当该段落没有之前的兄弟段落时，您的选择器才会失败，这意味着它必须是 first-child，因此请像这样修改您的规则：

:not(.someclass) + p,
p:first-child {
    color: yellow
}

:not(.someclass) + p,
p:first-child {
    color: yellow
}

<div>
  <h3 class="someclass">title</h3>
  <p>This does not have the style applied</p>
  <p>This has the style applied</p>
</div>

<div>
  <p>This should have the style applied but it doesn't</p>
</div>

CSS :not 选择器不忽略下一个选择器

CSS :not selector does not neglect the next selector

html

css

css-selectors