CSS Specificity là gì?
CSS Specificity là độ ưu tiên trong CSS. Nếu có nhiều selector cùng trỏ vào một element thì selector nào có độ ưu tiên cao hơn sẽ "thắng".
Hãy em specificity chính là điểm số ưu tiên của selector trong CSS.
Hãy xem các ví dụ sau:
<html> <head> <style> p {color: red;} </style> </head> <body> <p>Hello World!</p> </body> </html>
Bây giờ, hãy xem ví dụ 2.
Trong ví dụ này, chúng tôi đã thêm một class selector (được đặt tên là "Test") và chỉ định màu xanh lá cây cho class này. Văn bản bây giờ sẽ có màu xanh lá cây (mặc dù chúng tôi đã chỉ định màu đỏ cho element selector "p"). Điều này là do class selector được ưu tiên cao hơn:
<html> <head> <style> .test {color: green;} p {color: red;} </style> </head> <body> <p class="test">Hello World!</p> </body> </html>
Bây giờ, hãy xem ví dụ 3.
Trong ví dụ này, chúng tôi đã thêm id selector (có tên là "demo"). Văn bản bây giờ sẽ có màu xanh lam, vì id selector được ưu tiên cao hơn:
<html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test">Hello World!</p> </body> </html>
Bây giờ, hãy xem ví dụ 4.
Trong ví dụ này, chúng tôi đã thêm một inline style cho element "p". Văn bản bây giờ sẽ có màu hồng, vì style inline được ưu tiên cao nhất:
<html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test" style="color: pink;">Hello World!</p> </body> </html>
Specificity Hierarchy
Mỗi CSS selector đều có vị trí của nó trong hệ thống phân cấp tính cụ thể.
Có bốn loại để xác định mức độ ưu tiên của selector:
- Inline styles - Ví dụ: <h1 style="color: pink;">
- IDs - Ví dụ: #navbar
- Classes, pseudo-classes, attribute selectors - Ví dụ: .test, :hover, [href]
- Elements và pseudo-elements - Ví dụ: h1, :before
Cách tính toán Specificity
Hãy nhớ cách tính specificity.
Bắt đầu từ 0, thêm 100 cho mỗi giá trị ID, thêm 10 cho mỗi giá trị class (hoặc pseudo-class hoặc attribute selector), thêm 1 cho mỗi element selector hoặc pseudo-element.
Lưu ý: Kiểu inline nhận giá trị đặc trưng là 1000 và luôn được ưu tiên cao nhất!
Lưu ý 2: Có một ngoại lệ đối với quy tắc này: nếu bạn sử dụng quy tắc !important, nó thậm chí sẽ ghi đè các kiểu inline!
Bảng dưới đây cho thấy một số ví dụ về cách tính giá trị specificity cụ thể:
| Selector | Giá trị specificity | Tính toán |
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (universal selector bị bỏ qua) |
Selector có specificity cao nhất sẽ được ưu tiên và có hiệu lực!
Hãy xem xét ba đoạn code sau:
A: h1 B: h1#content C: <h1 id="content" style="color: pink;">Tiêu đề</h1>Giá trị specificity của A là 1 (1 element selector)
Giá trị specificity của B là 101 (1 ID reference + 1 element selector)
Giá trị specificity của C là 1000 (inline styling)
Vì quy tắc (C) có giá trị specificity cao nhất (1000), nên nó sẽ được ưu tiên.
Thêm một số quy tắc về specificity
Giá trị specificity: quy tắc mới nhất được ưu tiên - Nếu cùng một selector được viết hai lần, thì selector mới nhất sẽ được ưu tiên:
h1 {background-color: yellow;} h1 {background-color: red;}
ID selector có giá trị specificity cao hơn attribute selector - Hãy xem ba dòng code sau:
div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;}quy tắc đầu tiên cụ thể hơn hai quy tắc còn lại và do đó sẽ được áp dụng.
Selector theo ngữ cảnh cụ thể hơn element selector đơn lẻ - Biểu định kiểu được nhúng gần với element cần tạo kiểu hơn. Vì vậy, trong tình huống sau
Từ file external CSS: #content h1 {background-color: red;} Trong file HTML: <style> #content h1 {background-color: yellow;} </style>quy tắc sau sẽ được áp dụng.
class selector ưu tiên cao hơn bất kỳ số lượng element selector nào - một class selector chẳng hạn như .intro sẽ ưu tiên cao hơn h1, p, div, v.v.:
.intro {background-color: yellow;} h1 {background-color: red;}