Bài 43: Cách sử dụng Specificity trong css

Cách sử dụng Specificity trong css

Trong CSS, specificity là một khái niệm quan trọng để xác định thứ tự ưu tiên của các quy tắc CSS được áp dụng cho các phần tử trên trang web. Khi có nhiều quy tắc CSS được áp dụng cho cùng một phần tử, CSS sẽ sử dụng specificity để xác định quy tắc nào được áp dụng trước.

Specificity được tính bằng cách đếm số lượng các thành phần trong một chọn lọc CSS. Các thành phần này bao gồm:

• Số lượng ID selectors
• Số lượng class selectors, attribute selectors và pseudo-classes
• Số lượng element selectors và pseudo-elements

Các thành phần này được sắp xếp theo thứ tự ưu tiên giảm dần, tức là ID selector có độ ưu tiên cao hơn class selector, và class selector có độ ưu tiên cao hơn element selector.

Ví dụ:

/* selector 1 */
#my-element {
  color: red;
}

/* selector 2 */
.some-class {
  color: blue;
}

/* selector 3 */
div {
  color: green;
}

Trong đó, selector 1 có độ ưu tiên cao nhất do sử dụng ID selector (#my-element), selector 2 có độ ưu tiên thấp hơn do sử dụng class selector (.some-class), và selector 3 có độ ưu tiên thấp nhất do sử dụng element selector (div).

Ngoài ra, còn có một số quy tắc để tính toán specificity:

• Nếu hai quy tắc có cùng độ ưu tiên, quy tắc được đặt sau sẽ được áp dụng.
• Quy tắc inline (được đặt trong thuộc tính style của phần tử) có độ ưu tiên cao hơn các quy tắc được định nghĩa trong một tệp CSS bên ngoài.
• Khi sử dụng các pseudo-class như :hover hay :active, specificity của pseudo-class này được tính riêng biệt và được thêm vào tổng specificity của selector.

Tuy nhiên, lưu ý rằng việc sử dụng specificity quá cao có thể dẫn đến việc khó bảo trì và làm chậm quá trình tải trang web. Vì vậy, nên sử dụng specificity một cách hợp lý và tối ưu.