Nghiên cứu tính cụ thể tôi tình cờ tìm thấy trên blog này - http://www.htminois.com/guides/cssadvified/specificity/
Nó nói rằng tính đặc hiệu là một hệ thống tính điểm cho CSS. Nó cho chúng ta biết rằng các yếu tố có giá trị 1 điểm, các lớp có giá trị 10 điểm và ID có giá trị 100 điểm. Nó cũng đi đầu nói rằng những điểm này được tính tổng và tổng số là tính đặc hiệu của bộ chọn.
Ví dụ:
cơ thể = 1 điểm
cơ thể .wrapper = 11 điểm
cơ thể .wrapper #container = 111 điểm
Vì vậy, bằng cách sử dụng các điểm này, tôi hy vọng CSS và HTML sau sẽ dẫn đến văn bản có màu xanh:
#a {
color: red;
}
.a .b .c .d .e .f .g .h .i .j .k .l .m .n .o {
color: blue;
}
<div class="a">
<div class="b">
<div class="c">
<div class="d">
<div class="e">
<div class="f">
<div class="g">
<div class="h">
<div class="i">
<div class="j">
<div class="k">
<div class="l">
<div class="m">
<div class="n">
<div class="o" id="a">
This should be blue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tại sao văn bản có màu đỏ khi 15 lớp sẽ bằng 150 điểm so với 1 ID bằng 100 điểm?
Rõ ràng các điểm không chỉ là tổng số; chúng được nối lại. Đọc thêm về điều đó ở đây - http: // www. Wareandnonsense.co.uk/archives/css_specificity_wars.html
Điều đó có nghĩa là các lớp trong bộ chọn của chúng tôi = 0,0,15,0
HOẶC 0,1,5,0
?
(bản năng của tôi cho tôi biết đó là trước đây, vì chúng tôi BIẾT tính đặc hiệu của bộ chọn ID trông như thế này 0,1,0,0
:)