Đặc tính CSS
Tính cụ thể là gì?
Nếu có hai hoặc nhiều quy tắc CSS trỏ đến cùng một phần tử, bộ chọn có giá trị đặc hiệu cao nhất sẽ "thắng" và khai báo kiểu của nó sẽ được áp dụng cho phần tử HTML đó.
Hãy coi tính cụ thể như một điểm số / thứ hạng xác định tuyên bố kiểu nào cuối cùng sẽ được áp dụng cho một phần tử.
Hãy xem các ví dụ sau:
ví dụ 1
Trong ví dụ này, chúng tôi đã sử dụng phần tử "p" làm bộ chọn và chỉ định màu đỏ cho phần tử này. Văn bản sẽ có màu đỏ:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Bây giờ, hãy xem ví dụ 2:
Ví dụ 2
Trong ví dụ này, chúng tôi đã thêm một bộ chọn lớp (có tên là "test") và chỉ định màu xanh lá cây cho lớp này. Văn bản bây giờ sẽ có màu xanh lục (mặc dù chúng tôi đã chỉ định màu đỏ cho bộ chọn phần tử "p". Điều này là do bộ chọn lớp được ưu tiên cao hơn:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Bây giờ, hãy xem ví dụ 3:
Ví dụ 3
Trong ví dụ này, chúng tôi đã thêm bộ chọn id (có tên là "demo"). Văn bản bây giờ sẽ có màu xanh lam, vì bộ chọn id được ưu tiên cao hơn:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Bây giờ, hãy xem ví dụ 4:
Ví dụ 4
Trong ví dụ này, chúng tôi đã thêm một kiểu nội tuyến cho phần tử "p". Văn bản bây giờ sẽ có màu hồng, vì kiểu nội tuyến được ưu tiên cao nhất:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Hệ thống phân cấp tính cụ thể
Mỗi bộ chọn CSS đều có vị trí của nó trong hệ thống phân cấp tính cụ thể.
Có bốn danh mục xác định mức độ cụ thể của một bộ chọn:
- Kiểu nội tuyến - Ví dụ: <h1 style = "color: pink;">
- ID - Ví dụ: #navbar
- Lớp, lớp giả, bộ chọn thuộc tính - Ví dụ: .test,: hover, [href]
- Phần tử và phần tử giả - Ví dụ: h1,: before
Làm thế nào để tính toán cụ thể?
Thuộc lòng cách tính độ đặc hiệu!
Bắt đầu từ 0, thêm 100 cho mỗi giá trị ID, thêm 10 cho mỗi giá trị lớp (hoặc lớp giả hoặc bộ chọn thuộc tính), thêm 1 cho mỗi bộ chọn phần tử hoặc phần tử giả.
Lưu ý: Kiểu nội tuyến nhận giá trị đặc trưng là 1000 và luôn được ưu tiên cao nhất!
Lưu ý 2: Có một ngoại lệ đối với quy tắc này: nếu bạn sử dụng !important
quy tắc, nó thậm chí sẽ ghi đè các kiểu nội tuyến!
Bảng dưới đây trình bày một số ví dụ về cách tính giá trị độ cụ thể:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Bộ chọn có giá trị độ đặc hiệu cao nhất sẽ thắng và có hiệu lực!
Hãy xem xét ba đoạn mã sau:
Thí dụ
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Độ đặc hiệu của A là 1 (bộ chọn một phần tử)
Độ đặc hiệu của B là 101 (một tham chiếu ID + một bộ chọn phần tử)
Độ đặc hiệu của C là 1000 (kiểu nội dòng)
Vì quy tắc thứ ba (C) có giá trị đặc hiệu cao nhất (1000), khai báo kiểu này sẽ được áp dụng.
Ví dụ về quy tắc tính cụ thể hơn
Tính cụ thể ngang nhau: quy tắc mới nhất thắng - Nếu cùng một quy tắc được viết hai lần vào biểu định kiểu bên ngoài, thì quy tắc mới nhất sẽ thắng:
Thí dụ
h1 {background-color: yellow;}
h1 {background-color: red;}
Bộ chọn ID có độ đặc hiệu cao hơn bộ chọn thuộc tính - Hãy xem ba dòng mã sau:
Thí dụ
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
quy tắc đầu tiên cụ thể hơn hai quy tắc còn lại và do đó sẽ được áp dụng.
Bộ chọn theo ngữ cảnh cụ thể hơn bộ chọn phần tử đơn lẻ - Biểu định kiểu được nhúng gần với phần tử cần tạo kiểu hơn. Vì vậy, trong tình huống sau
Thí dụ
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
quy tắc sau sẽ được áp dụng.
Một bộ chọn lớp đánh bại bất kỳ số lượng bộ chọn phần tử nào - một bộ chọn lớp chẳng hạn như .intro đánh bại h1, p, div, v.v.:
Thí dụ
.intro {background-color: yellow;}
h1 {background-color:
red;}
Bộ chọn phổ quát (*) và các giá trị kế thừa có đặc tính là 0 - Bộ chọn phổ dụng (*) và các giá trị kế thừa bị bỏ qua!