CSS 선언 취소

Question

이전 규칙을 기본적으로 "취소"하는 CSS 규칙을 사용할 수 있습니까?

예 :

<blockquote> 
    some text <em>more text</em> other text 
</blockquote> 

와의이이 CSS의 가정 해 봅시다 :

blockquote { 
    color: red; 
} 

이 ...하지만 난 일반 텍스트 색상을 (당신이 반드시 알고있다)을 유지하기 위해 <em>을 원하는 .

기본적으로 이와 비슷한 방법이 있습니까?

blockquote em { 
    color: inherit-from-blockquote's-parent 
} 

---

편집 : 나는 실제로이 작업 할 얻으려고 코드는 실제로는 조금 더 복잡하다. 아마도 이것은 더 잘 설명 할 수 있습니다.

This text should be *some unknown colour* 
<ul> 
    <li>This text should be BLUE 
     <ul> 
      <li>Same as outside the UL</li> 
      <li>Same as outside the UL</li> 
     </ul> 
    </li> 
</ul> 

ul { 
    color: blue; 
} 
ul ul { 
    color: ???; 
} 

Answer 1

CSS만으로는 부모의 부모를 참조 할 수 없습니다.

원하는 효과가 나타나도록 특정 CSS 선택기와 마크 업을 조합 해보십시오.

<td> 
    This is the enclosing element. 
    <ul> 
    <li>This is the first level UL, direct child of TD 
     <ul> 
     <li>This is the second level UL</li> 
     <li>Same as outside the UL</li> 
     </ul> 
    </li> 
    </ul> 
</td> 

CSS :

td > ul 
    color: blue; /* this affects the "direct child" UL only */ 
} 

당신은, 한 수준으로 스타일 상속의 깊이를 제한 할 결과적으로 내부 UL 색상에 관해서 스타일이 적용되지 않은이고 바깥 쪽 텍스트에서의 설정을 가져옵니다.

CSS Child Selector에 대한 자세한 내용을 읽어 보거나 오래된 브라우저의 경우 별다른 차이가있을 수 있습니다.

---

EDIT 인터넷 익스플로러 6의 경우

가, 아이의 선택이 일부 위조 할 수있다 확장한다. 이것을 사용하기 전에 안전 벨트 (조건부 주석 등)을 고정하십시오 :

는

td ul { 
    color: expression(/TD/.test(this.parentNode.tagName)? "blue" : "black"); 
} 

이 외부 색상과 같은 "블랙"가정합니다. 이 색상 값이 변경 될 수 있다면 운이 좋지 않습니다. 두렵습니다. 컨텍스트에서 색상 값을 가져올 수있는 expression()을 정의 할 수 없다면 (예 : 부모 요소의 다른 속성 확인). 또는 다른 누군가가 이미 제안한 것처럼 JS 프레임 워크를 포기하고 사용할 수 있습니다.

물론 것 JS를 사용하지 않고 겁쟁이 솔루션 :

td ul.first { 
    color: blue; 
} 

그러나 당신이를 피하려는 이유는 내가 볼 수 있습니다.

Answer 2

좋아요, 예제가있는 추가 텍스트는 질문을 명확하게 나타냅니다. 그리고 나는 당신이 원하는 것이 가능하지 않다는 것에 대해 사과합니다.

"알 수없는 색상"을 알고 있다면 물론 색상을 반복 할 수 있습니다. 하지만 CSS는 변수 나 참조를 추가 할 수있는 메커니즘이 필요하다고 생각합니다.

그래서 당신은 성가신에 충실해야한다 :

ul { 
    color: blue; 
} 
li ul { 
    color: sameenvironment; /* Sorry but you have to add the specific colour here */ 
} 

Answer 3

내 CSS 조금 녹슨이지만,이 작동합니다 :

blockquote { 
    color: red; 
} 

blockquote em { 
    color: inherit; 
} 

당신은 빨간색으로 blockquotes을 설정하는

있지만, 모든 <em>'s을 그 blockquote에 포함되어 있습니다. 상속 받아야합니다. ... 음, 주변 텍스트 나 blockquote에서 상속해야합니까?

위의 코드가 원하는대로 작동하지 않는 경우 현재 마크 업으로 수행 할 방법이 없다고 생각합니다. 추가 마크 업을 사용하거나 색상을 명시 적으로 설정해야합니다 (예 :

: 당신이 당신의 HTML을 변경할 수 있습니다 경우에는 추가로 span 태그없이이 작업을 수행하는 또 다른 방법

<li><span>This text should be BLUE</span> 
    <ul> 
     <li>Same as outside the UL</li> 
     <li>Same as outside the UL</li> 
    </ul> 
</li> 

과 스타일

li span{ 
    color: blue; 
} 

편집 을 시도 할 수

blockquote em { 
     color: Purple; 
} 

Answer 4

정의하는 스타일 클래스 (또는 다른 선택기)가 있다고 가정하면 외부의 ul의 부모에게. 다음과 같이 CSS를 수정할 수 있습니다.

.parentStyle, 
.parentStyle li li{ 
    color:red; 
} 
li{ 
    color:blue; 
} 

Answer 5

자바 스크립트 스 니펫을 사용하여 부모 스타일을 감지하고 설정하십시오. :)

Answer 6

사용이 색상 설정되었을 수 있습니다 어떤 다른 상속 무시 확인하기 :

이

blockquote em { 
    color: inherit !important; 
} 

Answer 7

오히려 그 조부모에서 글꼴 색상을 상속하는 선택을 강요하는 것보다, 내가 제안했다을 선택자와 그 조부모에게 글꼴 색상에 대한 공유 선언을 제공하십시오.

body, blockquote em { 
     color:[whatever]; 
} 


blockquote { 
     color:red; 
} 

그리고 정렬되지 않은리스트의 경우

, 그것은 다음과 같습니다 :

body, ul ul { 
     color:[whatever]; 
} 


ul { 
     color:blue; 
} 

Answer 8

나도이 질문을했지만, 이후 인용구 예를 촬영

는, 그 몸을 가정은 조부모입니다 나는

이

body { 
     color : initial; 
    } 

IE이 현재 게코이 지원하지 않습니다, 그것은 나를 때리는 다른 답변에서 보았다 -moz- 이니셜이 필요합니다. 믿습니다.

body { 
     color : unset; 
    } 

이것은 현재 지원되지 않습니다. 나는 이것에 대해 생각하는 다른 사람들을 위해 나의 대답을 나눌 것이라고 생각했습니다.