Tại sao trong số following codeworld có màu xanh thay vì màu đỏ?Câu hỏi CSS - Tính đặc hiệu và sự liên kết
Độ đặc hiệu của .my_class là 0,0,1,0, nhưng nó được thừa hưởng màu sắc của #my_id mà đặc hiệu là cao (0,1,0,0).
HTML:
<p id='my_id'>
Hello
<span class='my_class'>
world
</span>
</p>
CSS:
#my_id {
color: red;
}
.my_class {
color: blue;
}
Xem: w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance
Một kế thừa giá trị hiệu lực thi hành đối với một yếu tố chỉ nếu không có tuyên bố phong cách khác đã được áp dụng trực tiếp vào phần tử.
phong cách này áp dụng cho một phần tử với id="my_id":
#my_id {
color: red;
}
... và sẽ được áp dụng (kế thừa) cho một phần tử lồng bên trong có class="my_class"chỉ khi tài sản color của nó là khác không xác định.
... mà không còn là trường hợp khi bạn tuyên bố:
.my_class {
color: blue;
}
nó đi dựa trên đặc hiệu và vị trí. Lớp được áp dụng trực tiếp cho văn bản, nhưng ID là xa hơn.
Đối với một lời giải thích dài: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
Một cách đơn giản hơn để nghĩ về nó, trình tự đặc hiệu áp dụng tại cùng một mức, nếu một phong cách là cha mẹ địa phương hơn sau đó nó được áp dụng, không phân biệt nếu một tổ tiên có một phong cách có độ đặc hiệu cao hơn (vì nó xa hơn, hoặc ít địa phương hơn).
Câu hỏi hay. Lý do điều này xảy ra, iiuc là do thừa kế, không cụ thể.
Nhìn vào nó theo cách này, nếu khoảng không có lớp đó, nó sẽ thừa hưởng màu đỏ từ phần tử <p> và "thế giới" màu đỏ sẽ là màu đỏ. Nhưng lưu ý rằng đó là do thừa kế.
Khi bạn đặt màu cho khoảng, qua lớp, ghi đè giá trị kế thừa.
Tính đặc hiệu là để xác định quy tắc nào sẽ sử dụng trong nhiều quy tắc cạnh tranh. Trong ví dụ của bạn, không có quy tắc cạnh tranh cho < khoảng >, vì vậy tính đặc hiệu không được phát. Tuy nhiên, nếu bạn đã thêm kiểu này vào kiểu của mình:
#my_id span {color: orange}
bạn sẽ thấy rằng "thế giới" có màu cam do tính đặc hiệu của id nhiều hơn lớp.