CSS Specificity


"CSS Specificity" là một hệ thống xếp hạng xác định những khai báo kiểu nào sẽ được áp dụng cho một thành phần trong trang web. Đây là một khái niệm quan trọng cần hiểu để viết và bảo trì hiệu quả CSS của bạn, vì nó có thể giúp bạn tránh xung đột và đảm bảo rằng các thuộc tính css của bạn đang được áp dụng như dự định.


Ví dụ, xem HTML sau:

<div class="container">
  <p class="warning">This is a warning</p>
</div>


Và CSS sau:

.warning { color: yellow; }
p { color: red; }

Trong trường hợp này, khai báo "p" có độ ưu tiên là 1 và khai báo ".warning" có độ ưu tiên là 10. Do phần khai báo ".warning" có tính ưu tiên cao hơn nên sẽ được ưu tiên hơn và dòng chữ "This is a warning" sẽ hiển thị màu vàng.


Trong CSS, mọi thành phần trên trang web đều có thể được tạo kiểu bằng một bộ quy tắc được gọi là "khai báo". Các khai báo này có thể được chỉ định theo một số cách khác nhau, bao gồm thông qua việc sử dụng các class, ID và element selector. Tuy nhiên, khi nhiều khai báo được áp dụng cho cùng một phần tử, có thể khó xác định kiểu nào sẽ được ưu tiên. Đây là nơi tính độ ưu tiên phát huy tác dụng.


Tính ưu tiên là thước đo mức độ "cụ thể" của một style đã được khai báo nhất định. Khai báo càng cụ thể thì xếp hạng tính ưu tiên của nó càng cao và càng có nhiều khả năng nó được áp dụng cho một element. Tính ưu tiên được xác định bởi số lượng và loại bộ chọn được sử dụng trong một khai báo kiểu nhất định.


Trong CSS, có bốn loại selector khác nhau mà có thể được sử dụng để chỉ định một kiểu: type selectors, class selectors, ID selectors, và attribute selectors. Mỗi loại này có một xếp hạng ưu tiên khác nhau, với type selectors là ít đặc điểm nhất và chọn từ ID selectors là ưu tiên cao nhất.


CSS Specificity là một khái niệm quan trọng trong CSS để xác định thứ tự ưu tiên áp dụng các quy tắc CSS cho các phần tử trên trang web. Nó xác định rõ ràng rằng khi có nhiều quy tắc CSS được áp dụng cho cùng một phần tử, quy tắc nào sẽ có ưu tiên hơn và được áp dụng.

Mỗi phần tử trong HTML có thể được áp dụng nhiều quy tắc CSS khác nhau thông qua các lớp (classes), id hoặc các quy tắc trực tiếp. CSS Specificity đánh giá mức độ ưu tiên của các quy tắc dựa trên việc gán điểm cho mỗi loại chọn lọc (selector) trong CSS.

CSS Specificity có thể được biểu diễn bằng cách sử dụng một dãy số có ba thành phần chính: a, b và c. Mỗi thành phần đại diện cho một cấp độ ưu tiên khác nhau:

  • a: Số lượng lớp (classes), quy tắc trực tiếp hoặc bộ chọn (element selector).
  • b: Số lượng id selectors.
  • c: Số lượng quy tắc inline (quy tắc được định nghĩa trực tiếp trong phần tử HTML).

Khi hai quy tắc CSS có cùng mức độ ưu tiên, thứ tự xuất hiện trong mã CSS sẽ quyết định quy tắc nào được áp dụng cuối cùng.


Ví dụ, một quy tắc CSS có mức độ ưu tiên là 0, 1, 0, 0 (a = 0, b = 1, c = 0, với b được tính là 1 vì có một id selector) sẽ có ưu tiên hơn một quy tắc có mức độ ưu tiên là 0, 0, 1, 0 (a = 0, b = 0, c = 1, với c được tính là 1 vì có một quy tắc inline).

Hiểu rõ CSS Specificity giúp bạn điều khiển được cách áp dụng các quy tắc CSS và giải quyết các xung đột xảy ra. Nắm vững khái niệm này sẽ giúp bạn viết mã CSS hiệu quả và tránh những khó khăn không cần thiết trong việc xây dựng giao diện web.