Giải Thích Khái Niệm Specificity Trong CSS

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.

1. Khái Niệm Specificity

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.

2. Các Loại Selector và Độ Specificity

Độ 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:

• Inline styles: Có độ specificity cao nhất. Khi một kiểu được áp dụng trực tiếp vào phần tử thông qua thuộc tính style, nó sẽ luôn được ưu tiên.
  • Ví dụ: <p style="color: red;">This is a paragraph.</p>
• ID selectors: Có độ specificity cao. Mỗi ID selector trong quy tắc có giá trị 1 cho ID.
  • Ví dụ: #header có độ specificity là 1.
• Class, attribute, và pseudo-class selectors: Có độ specificity trung bình. Mỗi loại selector này có giá trị 1 cho mỗi class, attribute hoặc pseudo-class.
  • Ví dụ: .button, [type="text"], :hover đều có độ specificity là 1.
• Type selectors và pseudo-element selectors: Có độ specificity thấp. Mỗi selector này có giá trị 1 cho mỗi phần tử.
  • Ví dụ: p, div, ::before đều có độ specificity là 1.

3. Cách Tính Độ Specificity

Độ specificity được tính theo công thức sau:

• Độ specificity được biểu diễn bằng bốn số: (a, b, c, d), trong đó:
  • a: Số lượng inline styles.
  • b: Số lượng ID selectors.
  • c: Số lượng class selectors, attribute selectors và pseudo-classes.
  • d: Số lượng type selectors và pseudo-elements.

Ví dụ: Đối với quy tắc sau:

#header .nav ul li a:hover {
    color: blue;
}

• a = 0 (không có inline styles)
• b = 1 (1 ID selector là #header)
• c = 3 (1 class là .nav, 1 type là ul, 1 type là li, 1 type là a, 1 pseudo-class là :hover)
• d = 0 (không có pseudo-elements)

Do đó, độ specificity của quy tắc này là (0, 1, 3, 0).

4. Ví Dụ Cụ Thể

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.

5. Các Quy Tắc Của Specificity

1. Inline styles luôn chiếm ưu thế: Nếu bạn có một style inline, nó sẽ áp dụng cho phần tử bất kể các quy tắc CSS khác.
2. ID selectors có độ ưu tiên cao hơn: Nếu có các quy tắc khác cùng áp dụng, ID selectors sẽ luôn có ưu tiên hơn.
3. Class và type selectors có độ ưu tiên thấp hơn: Các quy tắc sử dụng class và type selectors sẽ có độ ưu tiên thấp hơn so với ID selectors.