2012-10-24 32 views
6

Hôm qua tôi gặp phải vấn đề này: Một trong số :hover -states của tôi ngừng hoạt động. Tôi phát hiện ra rằng Nếu tôi thay đổi này:Ai đó có thể giải thích lý do tại sao "-nút con" -selector có một ưu tiên cao hơn "hover"?

div.item {} 
div.item:hover {} 
div.item:nth-child(even) {} 

này:

div.item {} 
div.item:nth-child(even) {} 
div.item:hover {} 

nó hoạt động trở lại.

Tôi đã tạo một demo on jsfiddle để hiển thị cả hai trường hợp.

Ai đó có thể giải thích, tại sao :hover -state bị ghi đè bởi bộ chọn?

Trả lời

11

Các bộ chọn có cùng số specificity, vì vậy bộ chọn cuối cùng sẽ được ưu tiên.

+0

+1 Cảm ơn bạn, chính xác những gì tôi đang tìm kiếm. Tôi nghĩ rằng vẫn còn một số loại phân cấp trong các lớp giả. – insertusernamehere

+0

@insertusernamehere: Không, lớp giả duy nhất được miễn từ phép tính thông thường là ': not()', thay vào đó tính toán đặc trưng của đối số của nó. Điều này có nghĩa là tính đặc hiệu của ': not (E)' là 'E', chứ không phải là': not() '. – BoltClock

+0

@BoltClock Ah, do đó, có ít nhất một ngoại lệ. Cảm ơn thông tin bổ sung này. – insertusernamehere

0

Để ghi đè các đặc hiệu tương đương bạn có thể chuỗi các selectors

div.container_2 > div:nth-child(even):hover { 
    background: red; 
}​ 
+1

'div.item: nth-child (thậm chí): hover' là đủ để tăng tính đặc hiệu - không cần phải chọn bởi cha mẹ. – BoltClock

+0

@BoltClock cảm ơn, bạn đã đúng. Vị trí của tôi ở cuối phong cách trong fiddle khiến nó xuất hiện mà nó cụ thể hơn. –

Các vấn đề liên quan