변경 스타일 요소

Question

를 포함에 따라

가정하자 나는 다음과 같은 HTML이 :

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

</div> 

내가 클래스 highlight의 DIV 내부 <code> 블록 내에서 포장되지 <code>과는 다른 스타일을 가지고 같은 CSS를 구성 할 방법을 클래스 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 code "는"div.higlight code "에 표시되지만 일반"code "요소에는 표시되지 않습니다.

Answer 2

.className 뒤에 스타일을 적용 할 태그를 사용하십시오. 하이라이트 클래스가있는 모든 코드 블록을 대상으로합니다. "코드"의 나무 같이, 그래서 무엇을 상속

http://jsfiddle.net/9AeS3/

.highlight code { background: gray; }