CSS : not() 제대로 사용하는 방법?

난 단지 :not() 가상 클래스를 찾아서 예제를 시도했다. 흥미롭게도 내 로컬 컴퓨터에서 MDN 사이트와 다르게 보입니다.CSS : not() 제대로 사용하는 방법?

p:not(.classy) { color: red; } 
:not(p) { color: green; }

<p>Some text.</p> 
<p class="classy">Some other text.</p> 
<span>One more text</span>

출력 :

일부 텍스트입니다. < - 빨간색입니다.

다른 텍스트 < - 이것은 초록색입니까?! (기본값은 검은 색이어야합니다.)

한 줄짜리 텍스트 < - 이것은 초록색입니다.

는 요소를 검사하면, 나는 Some other text 어떻게 든 :not(p)에 의해 영향을받는 body에서 색 녹색을 상속 것을 발견했다.

MDN 사이트가 올바르게 표시되는 이유는 무엇입니까?

이

<p style="color: red;">Some text.</p> 
<p>Some other text.</p> 
<p style="color: green;">One more text</p>

그래서 제 질문은, 어떻게 제대로:not()를 사용하여 예기치 않은 결과를 유발하는 상속을 방지하는 것입니다 : 그것은 트릭입니까?

2013-02-12 Antony

사실 둘 다 맞습니다. ;) jsFiddle에서 , 그래서 :not(p)도 몸에 적용하고 p.classy 몸에서 색상을 상속, 몸에 특별한 색상 세트가 없습니다, 지금

body { color: blue; }

처럼, 먼저 기본 색상을 정의하려고합니다.

업데이트 된 예는 http://jsfiddle.net/3Jqxr/1/을 참조하십시오.

편집 : :not 선택의 특이성은 CSS에서 간단한 body보다 높은이기 때문에, 실제로이 예를 들어

body:not(p)

으로 기본 색상을 설정해야합니다.

2013-02-12 12:53:37 Paul

RAWR을, 당신이 날 전에있어. http://jsbin.com/uzujif/1/edit – estrar

같음 ...;) – jeroenvisser101

<p>에 기본값을 설정하지 않았으므로 <p class="classy"> 요소는 본문을 상속합니다. 당신은 아마 규칙 집합에서 <body>을 제외 할 :

body :not(p) { color: green; }

또는, 당신은 기본적으로 설정할 수 있습니다

p{ color: black; } 
p:not(.classy) { color: red; } 
:not(p) { color: green; }

2013-02-12 13:00:52

답변