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

Question

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

: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

只有当段落没有先前的兄弟姐妹时，您的选择器才会失败，这意味着它必须是第一个孩子，因此修改您的规则如下：

: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>