Specificity là một khái niệm quan trọng trong CSS, quyết định cách mà các quy tắc (rules) được áp dụng cho các phần tử HTML. Hiểu rõ về specificity sẽ giúp bạn kiểm soát cách thức mà các kiểu dáng được áp dụng, từ đó tạo ra các trang web đẹp và nhất quán.
Specificity là mức độ ưu tiên của một quy tắc CSS so với các quy tắc khác khi áp dụng kiểu dáng cho một phần tử. Nếu có nhiều quy tắc áp dụng cho cùng một phần tử, thì quy tắc có độ specificity cao hơn sẽ được ưu tiên.
Độ specificity được tính dựa trên loại selector được sử dụng. Mỗi loại selector sẽ có một giá trị khác nhau trong việc xác định độ specificity:
style, nó sẽ luôn được ưu tiên.
<p style="color: red;">This is a paragraph.</p>#header có độ specificity là 1..button, [type="text"], :hover đều có độ specificity là 1.p, div, ::before đều có độ specificity là 1.Độ specificity được tính theo công thức sau:
Ví dụ: Đối với quy tắc sau:
#header .nav ul li a:hover {
color: blue;
}#header).nav, 1 type là ul, 1 type là li, 1 type là a, 1 pseudo-class là :hover)Do đó, độ specificity của quy tắc này là (0, 1, 3, 0).
Giả sử bạn có các quy tắc CSS sau:
/* 1 */
p {
color: black; /* (0, 0, 0, 1) */
}
/* 2 */
#main p {
color: red; /* (0, 1, 0, 1) */
}
/* 3 */
.button p {
color: blue; /* (0, 0, 1, 1) */
}
/* 4 */
p.button {
color: green; /* (0, 0, 1, 1) */
}
/* 5 */
p:hover {
color: yellow; /* (0, 0, 1, 1) */
}Nếu bạn có một thẻ <p> trong phần tử có ID #main, màu sắc của thẻ đó sẽ là màu đỏ. Mặc dù có các quy tắc khác áp dụng cho thẻ <p>, nhưng do độ specificity của quy tắc thứ hai (ID selector) cao hơn, nó sẽ được ưu tiên.
