[Tips] Specificity trong css

  Bài viết hay nhất1
Specificity là cách tính toán style nào sẽ được một element sử dụng khi có nhiều rule có thể được apply vào element


I. Công thức tính specificity

Chúng ta có công thức tính specificity như sau:

1. Tính a
Chúng ta sẽ có giá trị 1 nếu style được apply từ thuộc tính style của HTML, ngược lại sẽ là 0. Chúng ta sẽ có một giá trị 1 hoặc 0. Chúng ta sẽ gọi giá trị nhận được là a. Giá trị a này có độ ưu tiên cao nhất trong tất cả các giá trị chúng ta sẽ có.
Ví dụ
Code:
<style type="text/css">
div{color:red;}
</style>
<div style="color: blue;">Đây là thẻ div</div>

Ở đoạn mã trên, chữ của div có nội dung là “Đây là thể div” sẽ là màu xanh mặc dù chúng ta định nghĩa styling cho màu chữ các div là màu đỏ. Chữ của div có nội dung là “Đây là thể div” sẽ là màu xanh vì nó có độ ưu tiên cao hơn

2. Tính b

Đếm số thuộc tính ID. Chúng ta gọi số thuộc tính id mà chúng ta có được là b. Giá trị b này có độ ưu tiên thấp hơn giá trị a mà chúng ta có ở trên
Ví dụ
Code:
<style type="text/css">
div{color:red;}
</style>
<div id="my_id">Đây là thẻ div có id</div>
Ở đoạn mã trên, chữ div có nội dung “Đây là thẻ div có id” sẽ có màu xanh mặc dù chúng ta định nghĩa styling cho div toàn cục là màu đỏ. Chữ của div có nội dung là “Đây là thẻ div có id” sẽ là màu xanh vì nó có độ ưu tiên cao hơn

3. Tính c

Đếm số thuộc tính, pseudo-class và tên các class. Giá trị đếm được ta đặt tên nó là c. Giá trị c này có độ ưu tiên thấp hơn so với giá trị a, b chúng ta có ở trên. Ví dụ
Code:
<style type="text/css">
div{color:red;}
</style>
<div title="text">Đây là thẻ div có title</div>
Ở đoạn mã trên, chữ div có nội dung “Đây là thẻ div có title” sẽ có màu xanh mặc dù chúng ta định nghĩa styling cho div toàn cục là màu đỏ. Chữ của div có nội dung là “Đây là thẻ div có title” sẽ là màu xanh vì nó có độ ưu tiên cao hơn

4. Tính d

Đếm số tên element (như là div ul, li, tr, td). Số đếm được chúng ta đặt tên cho nó là d. Giá trị này có độ ưu tiên thấp hơn so với các giá trị a, b, c mà chúng ta có ở trên
Qua các ví dụ ở trên, lý do mà các thẻ div của chúng ta không có màu đỏ là vì độ ưu tiên nó thấp hơn

5. Các pseudo element sẽ được bỏ qua

Nói tóm lại, tính specificity là chúng ta đi tính các giá trị a, b, c, d

II. Bảng ví dụ cách tính specificity

SelectorKiểu selectorSpecificity
*Universal Selector0,0,0,0, (a = 0, b = 0, c = 0, d = 0)
liElement Name0,0,0,1, (a = 0, b = 0, c = 0, d = 1)
ul liElement Name0,0,0,2, (a = 0, b = 0, c = 0, d = 2)
div h1 + pElement Name0,0,0,3, (a = 0, b = 0, c = 0, d = 3)
input[type='text']Element Name + Attribute0,0,1,1, (a = 0, b = 0, c = 1, d = 1)
.someclassClass Name0,0,1,0, (a = 0, b = 0, c = 1, d = 0)
div.someclassElement Name + Class Name0,0,1,1, (a = 0, b = 0, c = 1, d = 1)
div.someclass.someotherElement Name + Class Name + Class Name0,0,2,1, (a = 0, b = 0, c = 2, d = 1)
#someidID Name0,1,0,0, (a = 0, b = 1, c = 0, d = 0)
div#someidElement Name + ID Name0,1,0,1, (a = 0, b = 1, c = 0, d = 1)
style (attribute)style (attribute)1,0,0,0, (a = 1, b = 0, c = 0, d = 0)
You cannot reply to topics in this forum