如果<code>的父级不是<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解决吗？

小提琴

Answer 1

:not(pre) > code { … }应该做的工作,iff code元素是元素的直接子pre元素.

Answer 2

CSS 中没有父选择器。您唯一的选择是使样式适用于没有父项的样式<pre>，并使用选择器覆盖这些规则<pre>：

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

替代解决方案包括 JavaScript。