CSS Specificity là một khái niệm cơ bản trong CSS. Nó xác định thứ tự các style được áp dụng. Nếu có hai hoặc nhiều quy tắc CSS cùng hướng đến một phần tử, selector có độ ưu tiên cao nhất sẽ "thắng". Style của selector đó sẽ được áp dụng cho phần tử HTML đó. Độ ưu tiên được tính dựa trên các loại selector đã dùng. Bao gồm: style inline, ID, class, thuộc tính và loại phần tử. Hiểu về CSS Specificity rất quan trọng để:
- Tránh xung đột style
- Đảm bảo áp dụng design nhất quán
- Duy trì quyền kiểm soát code CSS
Kiến thức này rất cần thiết để tạo các stylesheet hiệu quả, dễ bảo trì và có khả năng mở rộng. Điều này giúp website hoặc ứng dụng hiển thị đúng như mong muốn.
CSS Specificity Rules
. Inline CSS
Inline CSS là phương pháp áp dụng style CSS trực tiếp vào các phần tử HTML. Nó sử dụng thuộc tính “style”. Nó có độ ưu tiên cao nhất và sẽ ghi đè tất cả các selector khác. Bao gồm: External stylesheets và Internal CSS.
. Internal CSS
Internal stylesheets là phương pháp định nghĩa style CSS bên trong phần tử <style> của tài liệu HTML. Style này hữu ích khi bạn muốn triển khai style trực tiếp trong tài liệu HTML. Độ ưu tiên của style này phụ thuộc vào CSS Selector được dùng với phần tử. Ví dụ: nếu một id được dùng thì nó có độ ưu tiên cao nhất. Nó cao hơn so với External stylesheet. Vì vậy internal CSS sẽ ghi đè các quy tắc trong external stylesheet.
. External CSS
External CSS được dùng để style nhiều trang HTML bằng một stylesheet duy nhất. External CSS chứa một file CSS riêng biệt với phần mở rộng .css. Style này có thể được liên kết qua thẻ <link> trong tài liệu HTML. Độ ưu tiên của style này cũng phụ thuộc vào CSS Selector dùng với phần tử.
Note:
- Độ ưu tiên chủ yếu được xác định bởi chính các Selector. Chứ không phải do style được định nghĩa bên trong thẻ <style> hay file CSS riêng. Đây là trường hợp của độ ưu tiên cho các quy tắc CSS external hoặc internal.
- Nếu các selector dùng trong External và Internal CSS chứa cùng các thành phần, độ ưu tiên của chúng sẽ giống nhau. Nó không bị ảnh hưởng bởi vị trí của quy tắc CSS.
- Nếu có bất kỳ xung đột nào về style của cùng một phần tử, các style sẽ được triển khai dựa trên thứ tự bao gồm trong tài liệu HTML.
- Khi hai hoặc nhiều selector có độ ưu tiên bằng nhau, selector cuối cùng (mới nhất) sẽ được tính.
- Các universal selector (như body) và inherited selector có độ ưu tiên thấp nhất.
Example: Ví dụ này minh họa CSS Specificity bằng cách định nghĩa style inline, internal & external cho các phần tử.
HTML<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
type="text/css"
href="external.css">
<style type="text/css">
h1 {
background-color: red;
color: white;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<h1>
Internal CSS overrides external CSS
</h1>
<h2 style="color: green;">
Inline CSS overrides internal CSS
</h2>
</body>
</html>
/* external.css */
h1 {
background-color: lightgreen;
}
h2 {
color: pink;
}
Output:
Specificity Hierarchy
Mỗi Selector có một vị trí trong hệ thống cấp bậc. Nó được mô tả dưới đây:
| Priority | Description |
|---|---|
| Inline style | Ưu tiên cao nhất. Được áp dụng trực tiếp bằng thuộc tính style. |
| ID selectors | Ưu tiên cao thứ hai. Được xác định bằng thuộc tính id duy nhất của một phần tử. |
| Classes, pseudo-classes, | Mức độ ưu tiên trung bình. Được nhắm mục tiêu bằng tên class, pseudo-class như :hover. |
| attributes | Các thuộc tính như [type="text"]. |
| Elements and pseudo-elements | Ưu tiên thấp nhất. Áp dụng cho các phần tử HTML và pseudo-element như ::before và ::after. |
Example: Ví dụ này minh họa mức độ ưu tiên theo hệ thống cấp bậc của chúng.
HTML<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {
background-color: red;
color: white;
}
#second {
background-color: black;
color: white;
}
.third {
background-color: pink;
color: blue;
}
#second1 {
color: blue;
}
.third1 {
color: red;
}
</style>
</head>
<body>
<h1 id="second" class="third">
ID has highest priority.
</h1>
<h1>
Element selectors has lowest priority.
</h1>
<h1 class="third">
Classes have higher priority
than element selectors.
</h1>
<h2 style="color: green;"
id="second1"
class="third1">
Inline CSS has highest priority.
</h2>
</body>
</html>
Output:
