Изменить стиль на основе содержащего элемента

Question

Предположим, у меня есть следующий html:

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

Как мне структурировать CSS таким образом, чтобы <code> блоки внутри div класса highlight имели стиль, отличный от <code>, который не заключен в div класса highlight? Например, допустим, я хочу, чтобы они имели другой цвет фона и использовали разные шрифты.

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». ", но НЕ в виде простого элемента" code ".

Answer 2

Используйте .className, за которым следует тег, который вы хотите стилизовать. Это предназначается для всех блоков кода внутри чего-либо с классом выделения.

http://jsfiddle.net/9AeS3/

.highlight code { background: gray; }