CSS 속성과 의사 요소 선택자를 결합 하시겠습니까?

Question

가상 선택기 (:after)를 특성 선택기 ([title])와 결합하려면 어떻게해야합니까?

div[title]:after을 사용해 보았지만 Chrome에서는 작동하지 않습니다.

HTML :

<div title="foo">This div has a title.</div> 
<div>This div does not have a title.</div> 

CSS :

이

div:after { 
    content: "NO"; 
} 
div[title]:after { 
    content: "YES"; 
} 

데모 : http://jsfiddle.net/jmAX6/

그것은 나 "YES"그 DIV의의 각각의 끝에서 보여줍니다, 그것은 NO "표시해야합니다 "두 번째 div 이후.

Chrome 17.0.963.38을 실행 중입니다. 그것은 사파리 5.1.2에서 잘 작동하는 것 같습니다.

Answer 1

이것은 마치 reported 인 버그처럼 보입니다. 스타일 시트에 div[title]에 대한 CSS 규칙을 하나 이상의 선언이있는에 추가하면 div[title]:after 규칙이 마술처럼 적용됩니다. 예 :

div:after { 
    content: "NO"; 
} 
div[title] { 
    display: block; 
} 
div[title]:after { 
    content: "YES"; 
} 

the updated fiddle을 참조하십시오.

또한 아래의 설명과 같이 두 번째 div에 특정 HTML 속성이 있거나없는 것과 관련이있는 것으로 보입니다.