CSS 选择所有不是'pre'标签直系后代'code'元素

我正在尝试使用:not(~)选择器选择所有code元素，除了作为pre元素后代的元素。这篇文章有一个非常相似的答案，但我很难弄清楚我的问题。

<body>
<div><code>Div Code</code></div> 
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>
</body>

这个使用:not(~)的选择器似乎不起作用。

code:not(pre code) {
color:red;
}

code选择器选择所有三个，而pre code只选择第二个，那么使用:not连接它们不应该生成除第二个之外的所有三个吗？

这里可能出了什么问题？

我可以使用:not(~)以外的选择器，但它最适合我的用例code因为元素可以嵌套在其他元素中，并且我只想排除pre的后代。

提前谢谢。

如果你的<code>始终是<pre>的直系后代，你可以使用直系后代组合器来定位它：

:not(pre) > code {
color:red;
}

<body>
<div><code>Div Code</code></div> 
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>
</body>

注意：如果您删除了>，直观地，当然，它应该可以工作，但由于它可以针对任何祖先，例如<body>，它会匹配，因为body:not(pre)是正确的。

你不能那样做。:not()仅适用于标签本身，不适用于包装它的父标签。

你可以做的是添加一个类，如下所示<code>：<code class="notpre"></code>并添加一个像这样的 css 规则：

code.notpre {
color:red;
}

您可以在此处阅读有关伪类:not()的更多信息。

编辑 1：您也可以这样做，但不建议这样做，因为它太"宽"并且会影响一些不需要的<code>标签。我建议使用类名，就像我提到的第一个解决方案一样。

code {
color:red;
}
pre code {
color:initial;
}

<div><code>Div Code</code></div> 
<pre><code>Pre Code</code></pre> <!-- Exclude only this -->
<Code>Body Code</Code>

相关内容