Hôm nay cafedev chia sẻ cho ace về độ ưu tiên, độ cụ thể khi làm việc với CSS nhắm giúp ace làm việc nhanh, hiệu quả hơn và biết được trong một danh sách các style giống nhau như vậy thì trình duyệt sẽ chọn style nào để áp dụng cho phần tử.
Nội dung chính
1. Độ ưu tiên, độ cụ thể là gì?
Nếu có hai hoặc nhiều quy tắc CSS xung đột trỏ đến cùng một phần tử, trình duyệt sẽ tuân theo một số quy tắc để xác định quy tắc nào cụ thể nhất và do đó nó sẽ dùng quy tắc đó.
Hãy nghĩ về tính cụ thể như một điểm số / thứ hạng khi khai báo những style nào cuối cùng, nó sẽ được áp dụng cho phần tử.
Bộ chọn phổ quát (*) có độ cụ thể hay ưu tiên thấp, trong khi bộ chọn ID có độ cụ thể cao!
Lưu ý: Tính cụ thể, ưu tiên là lý do phổ biến khiến các quy tắc CSS của bạn không áp dụng cho một số phần tử, mặc dù bạn nghĩ chúng nên làm như vậy.
2. Hệ thống phân cấp tính cụ thể
Mỗi bộ chọn đều có vị trí 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(Inline styles ) – Kiểu nội tuyến được gắn trực tiếp vào phần tử cần tạo kiểu. Ví dụ: < h1 style = “color: #ffffff;” >.
IDs – ID là một số nhận dạng duy nhất cho các phần tử trang, chẳng hạn như #navbar.
Classes, attributes and pseudo-classes – Danh mục này bao gồm các lớp .class, [thuộc tính] và các lớp giả như: hover,: focus, v.v.
Elements and pseudo-elements – Danh mục này bao gồm tên phần tử và phần tử giả, chẳng hạn như h1, div,: before và: after.
3. Làm thế nào để tính toán độ cụ thể?
Ghi nhớ cách tính độ đặc hiệu!
Bắt đầu từ 0, thêm 1000 cho thuộc tính style, thêm 100 cho mỗi ID, thêm 10 cho mỗi thuộc tính, lớp hoặc lớp giả, thêm 1 cho mỗi tên phần tử hoặc phần tử giả.
Hãy xem xét ba đoạn mã sau:
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div> Tính cụ thể của A là 1 (một phần tử)
Độ cụ thể của B là 101 (một tham chiếu ID và một phần tử)
Độ cụ thể của C là 1000 (kiểu nội tuyến)
Vì 1 <101 <1000, quy tắc thứ ba (C) có mức độ cụ thể hơn và do đó sẽ được áp dụng lên UI của bạn.
4. Quy tắc cụ thể
Tính cụ thể bằng nhau: quy tắc mới nhất được tính – Nếu cùng một quy tắc được viết hai lần vào style sheet bên ngoài, thì quy tắc thấp hơn trong style sheet gần với phần tử được tạo kiểu hơn và do đó sẽ được áp dụng:
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>quy tắc sau luôn được áp dụng.
Bộ chọn ID có độ đặc hiệu cao hơn bộ chọn thuộc tính – Hãy xem ba dòng code sau:
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
quy tắc đầu tiên cụ thể hơn hai quy tắc còn lại và nó sẽ được áp dụng.
Bộ chọn theo ngữ cảnh cụ thể hơn bộ chọn phần tử đơn lẻ – Style sheet đượ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:
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 class đá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.:
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Bộ chọn phổ quát và các giá trị kế thừa có độ cụ thể 0 – *, body * và các giá trị tương tự có độ cụ thể bằng 0. Các giá trị được kế thừa cũng có độ cụ thể là 0.
Full series tự học CSS từ cơ bản tới nâng cao.
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
