html - 仅当其父级不是 时，我如何设置 样式？

Question

我正在像这里使用的那样集成 wmd-editor。

对于像 this one 这样的内联代码块，生成的html是:

<code>this one</code>

对于多行代码，例如:

var i = 0;
var j = 0;

生成的 html 是:

<pre>
  <code>var i = 0;</code>
  <code>var j = 0;</code>
<pre>

我为它们单独设置了 CSS:pre{ ... }和 code{ ... }

现在，我要<code>仅当其父级不是 <pre> 时才应用的样式.

我试过使用 code:not(pre code){ ... }但它似乎没有用。

我可以保证上面的HTML结构。

可以通过css解决吗？

Fiddle

Answer 1

:not(pre) > code { … } 应该完成这项工作， code 元素是 direct 子元素 pre 元素。