Giải thích khái niệm specificity trong CSS?

Trong CSS, specificity là một hệ thống xếp hạng hoặc điểm số xác định quy tắc kiểu nào sẽ được áp dụng cho một phần tử khi có nhiều quy tắc CSS cùng chỉ đến phần tử đó. Nếu có hai hoặc nhiều quy tắc CSS cùng áp dụng cho cùng một phần tử, quy tắc có giá trị specificity cao nhất sẽ "chiến thắng" và được áp dụng.

Specificity Hierarchy (Thứ tự ưu tiên)

Mỗi bộ chọn CSS có một vị trí trong thứ tự ưu tiên specificity dựa trên bốn danh mục sau:

1. Inline styles: Áp dụng trực tiếp trên thuộc tính style của phần tử HTML, có giá trị specificity là 1,000 điểm.
2. IDs: Bộ chọn dựa trên ID, ví dụ #navbar, có giá trị specificity là 100 điểm cho mỗi ID.
3. Classes, pseudo-classes, attribute selectors: Bộ chọn dựa trên class, pseudo-class, hoặc bộ chọn thuộc tính, ví dụ .test, :hover, [href], có giá trị specificity là 10 điểm cho mỗi class, pseudo-class, hoặc bộ chọn thuộc tính.
4. Elements and pseudo-elements: Bộ chọn dựa trên loại phần tử hoặc pseudo-element, ví dụ p, ::before, có giá trị specificity là 1 điểm cho mỗi phần tử hoặc pseudo-element.

Cách Tính Specificity

Để tính specificity, bạn bắt đầu từ 0 và...