CSS specificity (độ ưu tiên của CSS) là nguyên tắc xác định quy tắc CSS nào sẽ được áp dụng khi có nhiều quy tắc cùng nhắm đến một phần tử HTML. Nó đóng vai trò quan trọng trong thiết kế web để đảm bảo giao diện hiển thị đúng như mong muốn.
1. Nguyên tắc cơ bản
Khi nhiều quy tắc CSS áp dụng lên cùng một phần tử:
1. Trình duyệt tính điểm specificity cho mỗi quy tắc.
2. Quy tắc có điểm cao hơn sẽ được áp dụng.
3. Nếu điểm bằng nhau → áp dụng quy tắc được viết sau cùng.
2. Cách tính điểm specificity
|
Nhóm
|
Ý nghĩa
|
Ví dụ
|
Điểm
|
|
A
|
Inline style (CSS trực tiếp trong HTML)
|
<div style="color:red">
|
1000
|
|
B
|
ID selector
|
#header
|
100
|
|
C
|
Class, attribute, pseudo-class
|
.menu, [type="text"], :hover
|
10
|
|
D
|
Element selector, pseudo-element
|
div, h1, ::before
|
1
|
Công thức: A-B-C-D (nối thành số để so sánh, không cộng gộp như toán học).
Ví dụ:
#content .title → A=0, B=1, C=1, D=0 → specificity = 0-1-1-0
.main .highlight p → A=0, B=0, C=2, D=1 → specificity = 0-0-2-1
→ #content .title thắng vì 0-1-1-0 > 0-0-2-1.
.png)
3. Thứ tự ưu tiên từ cao đến thấp
1. Inline style (style="...")
2. ID selectors
3. Class, attribute selectors, pseudo-classes
4. Element selectors, pseudo-elements
5. Universal selector (*) và kế thừa từ cha (độ ưu tiên thấp nhất).
.png)
4. Điểm đặc biệt
- !important: Bỏ qua tính specificity thông thường, luôn ưu tiên cao nhất.
- Kế thừa: Thuộc tính kế thừa từ phần tử cha không ảnh hưởng đến specificity.
- Selector dài hơn chưa chắc ưu tiên hơn.
5. Ví dụ minh họa
<p id="intro" class="highlight">Xin chào</p>
CSS:
p { color: blue; } /* 0-0-0-1 */
.highlight { color: green; } /* 0-0-1-0 */
#intro { color: red; } /* 0-1-0-0 */
✅ Màu cuối cùng: đỏ (#intro thắng vì specificity cao hơn).
Thầy Đồng Văn Lưu – Giảng viên Khoa CNTT – ĐT
Nguồn: Tổng hợp từ Internet