如何设置样式<code> only if its parent is not <pre>?</pre></code>

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元素是pre元素的直接子元素。

Answer 2

CSS中没有父选择器。您唯一的选择是制作适用于没有<pre>父级的广告的样式，以及使用<pre>选择器覆盖这些规则的样式：

code { color: red; }
pre code { color: blue; } /* More specific, so will override the first! */

替代解决方案包括JavaScript。