Question

假设我有以下html：

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

</div>

如何构建CSS，使得类<code> div中的highlight块具有与<code>不同的样式，而highlight未包含在类{{1}的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代码中” “，但不是单纯的”代码“元素。

Answer 2

使用.className后跟要设置样式的标记。这将使用突出显示类定位所有代码块。

http://jsfiddle.net/9AeS3/

.highlight code { background: gray; }

根据包含元素更改样式

2 个答案: