Kết hợp Thuộc tính CSS và Bộ chọn phần tử giả?

Question

Làm cách nào để kết hợp bộ chọn phần tử giả (:after) với công cụ chọn thuộc tính ([title])?

Tôi đã thử sử dụng div[title]:after nhưng tính năng này không hoạt động trong 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"; 
} 

Demo: http://jsfiddle.net/jmAX6/

Nó cho thấy tôi "YES" ở phần cuối của mỗi người trong số những người của div, khi nó sẽ hiển thị "NO "sau div thứ hai.

Tôi đang chạy Chrome 17.0.963.38. Dường như nó hoạt động tốt trong Safari 5.1.2.

Answer 1

Điều này giống như một lỗi, cuối cùng là reported. Nếu bạn thêm quy tắc CSS cho div[title]ở bất kỳ đâu trong biểu định kiểu của mình với ít nhất một tuyên bố, quy tắc div[title]:after của bạn sẽ được áp dụng một cách kỳ diệu. Ví dụ:

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

Xem the updated fiddle.

Dường như có liên quan gì đó đến số div thứ hai của bạn có hoặc không có các thuộc tính HTML nhất định, như được hiển thị trong các nhận xét bên dưới.