Specificity trong css là gì?

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ụ

Đây là thẻ 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ụ

Đây là thẻ div có id

Ở đ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ụ

Đây là thẻ div có title

Ở đ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