Bài 40: Specificity trong CSS

Specificity trong CSS là gì ?

Nếu có hai hoặc nhiều quy tắc CSS xung đột trỏ đến cùng một phần tử, trình duyệt sẽ tuân theo một số quy tắc để xác định quy tắc nào cụ thể nhất và quy tắc nào có độ ưu tiên cao nhất sẽ được áp dụng.

Bảng xếp hạng Specificity

Mỗi bộ chọn đều có vị trí trong hệ thống phân cấp tính cụ thể. Có bốn danh mục xác định mức độ cụ thể của một bộ chọn:
Inline style – Thiết lập các thuộc tính CSS trực tiếp bên trong một phần tử. Ví dụ:<h1 style=”color: #ffffff;”>
ID– Thiết lập các thuộc tính CSS cho một phần tử được định danh duy nhất trong một trang, ví dụ như #navbar.
Class, attribute, pseudo-class – Ví dụ class như .menu, .header…, attribute như a[target] và pseudo-class như :hover, :focus…
Element, pseudo-element – Element như là h1, h2, div, p… và pseudo-element như là ::before, ::after, ::selection.

Cách tính Specificity

Specificity được tính là những con số nguyên dương. Cụ thể như sau:

• Inline style là 1000.
• ID là 100.
• Class, attribute, pseudo-class là 10.
• Element, pseudo-element là 1.

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

Specificity của A là 1 (một phần tử)
Specificity của B là 101 (một tham chiếu ID và một phần tử)
Specificity của C là 1000 (kiểu nội tuyến)
Vì 1 <101 <1000, quy tắc thứ ba (C) có mức độ cụ thể hơn, và do đó sẽ được áp dụng.

Các quy tắc Specificity

1. Nếu có các Specificity bằng nhau, quy tắc viết sau cùng sẽ được áp dụng

h1 {background-color: yellow;}
h1 {background-color: red;}

Quy tắc sau luôn được áp dụng.

2. ID selector sẽ có giá trị specificity cao hơn Attribute selector

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à sẽ được áp dụng.

3. Class selector sẽ có giá trị specificity cao hơn element selector

.intro {background-color: yellow;}
h1 {background-color: red;}