Trình chọn yếu tố cụ thể hơn bộ chọn id như thế nào?

Question

Vì tôi hiểu các yếu tố ít nhất là cụ thể. (yếu tố vs id). Xin hãy giúp tôi hiểu rõ tính đặc trưng của các bộ chọn.

<div id="container"> 
    <div id="firstDiv">FIRST Div inside CONTAINER</div> 
    <div id="secondDiv">SECOND Div inside CONTAINER</div> 
</div> 

body{ 
    width: 780px; 
    margin: 20px auto; 
} 
#container > div:not(:last-of-type){ 
    margin-bottom: 0px; /*How its more specific than ID selector below? */ 
} 
#container { 
    border: 15px solid orange; 
    padding: 10px; 
} 
#firstDiv{ 
    margin: 50px; /*This is not taking effect*/ 
    border: 5px solid blueviolet; 
} 
#secondDiv{ 
    border: 5px solid brown;  
} 

http://jsfiddle.net/t2RRq/

Answer 1

Để hiểu tính đặc hiệu của CSS, hãy đọc The Specificity Wars. Có một tờ tài liệu tham khảo có ích, quá:

Vì vậy, một selector như #foo sẽ phải 1,0,0 đặc hiệu, trong khi một bộ chọn thành phần như p sẽ phải 0,0,1 đặc hiệu. Trong số này, bộ chọn ID sẽ “giành chiến thắng” là 100 lớn hơn 1.

Một cụ thể hơn (heh) phiên bản này cũng bao gồm các yếu tố giả và giả các lớp học có thể được tìm thấy ở đây: http://www.standardista.com/css3/css-specificity/

Answer 2

Khi áp dụng quy tắc này, chọn đặc hiệu được tính bằng cách đếm tất cả selectors đơn giản (được liên kết bởi bất kỳ combinators), và không chỉ là chọn then chốt. Điều đó có nghĩa bạn không chỉ so sánh hai bộ chọn sau đây:

div 
#firstDiv 

Nhưng bạn đang so sánh hai bộ chọn sau đây:

#container > div:not(:last-of-type) 
#firstDiv 

Ở đây, bộ chọn đầu tiên là cụ thể hơn bởi vì nó có:

• Một bộ chọn ID, #container

• Bộ chọn loại (phần tử), div; và

• Lớp giả, trong trường hợp này là :last-of-type; chính bản thân lớp :not() không được tính vào độ đặc hiệu của bộ chọn

Trong khi bộ chọn thứ hai chỉ bao gồm một ID. Lưu ý rằng các combinator giống như > trong ví dụ đầu tiên của bạn không được tính vào độ đặc hiệu của bộ chọn.

Có toàn bộ phần trong Selectors spec bao gồm cách tính độ đặc hiệu của bộ chọn.