html - 根据包含元素更改样式

Question

假设我有以下 html:

This a test of <code>some code</code>.
<div class='highlight'>
    <pre>
        <code class='r'>
        </code>
    </pre>

</div>

我如何构造 CSS，使 <code>类 highlight 的 div 内的 block 风格不同于<code>未包含在 highlight 类的 div 中？例如，假设我希望它们具有不同的背景颜色并使用不同的字体。

Answer 1

div.highlight code {
  /* highlight parent only styles go here */
}

div code {
  /* default div code styles here */
}

code {
  /* default code styles here */
}

代码样式将继承显示的树，因此“代码”中的任何内容都将显示为“div 代码”和“div.highlight 代码”，而“div 代码”中的代码将显示在“div.higlight 代码”中"，但不是在其自身的普通“代码”元素中。