Tìm hiểu về Specificity trong CSS
Trong bài học này mình sẽ cùng tìm hiểu về ...
Trong bài học này mình sẽ cùng tìm hiểu về Specificity trong CSS là gì.
1. Specificity trong CSS là gì?
Trước khi hiểu specificity trong CSS là gì, mình sẽ lấy một ví dụ sau đây cho các bạn dễ hiểu:
<!DOCTYPE html>
<html>
<head>
<style>
#test {
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div id="test">Đây là phần tử div</div>
</body>
</html>Như vậy ví dụ ở phía trên, việc thiết lập màu nền (background-color) cho phần tử div được thiết lập 2 lần đó là selector id #test có màu nền là màu đỏ, selector div có màu nền là màu vàng
Vậy phần tử div sẽ lấy màu nền (background-color) là màu đỏ hay màu vàng. Các bạn bấm vào nút RUN để xem kết quả nhé.
Và kết quả của ví dụ trên là màu đỏ. Vì sao vậy? Đó là vì mỗi loại selector như id, class, element... sẽ có độ ưu tiên khác nhau, trình duyệt (browser) sẽ dựa vào nguyên tắc về độ ưu tiên của mỗi loại selector, loại selector nào có độ ưu tiên cao nhất sẽ được áp dụng.
Như vậy mình hiểu specificity trong CSS theo cách đơn giản nhất đó là quy ước về độ ưu tiên của mỗi loại selector như id, class, element...
Vậy độ ưu tiên đó như thế nào mình sẽ cùng tìm hiểu trong hệ thống phân cấp specificity (Specificity Hierarchy) trong mục 2 nhé.
2. Specificity Hierarchy
Mỗi loại selector sẽ một có vị trí trong hệ thống phân cấp specificity. Các loại selector sau đây được sắp xếp theo thứ tự ưu tiên từ trên xuống dưới:
- Inline styles: thiết lập các thuộc tính CSS trực tiếp bên trong một phần tử. Ví dụ: <h1 style="color: red;">, <span style="color: yellow;"></span>
- IDs: thiết lập các thuộc tính CSS cho một phần tử được định danh duy nhất trong một trang, như #menu, #header
- Classes, attributes and pseudo-classes: ví dụ class như .menu, .header ... attributes như a[target] và pseudo-classes như là :hover, :focus etc.
- Elements and pseudo-elements: element như là h1, h2, div, p... và pseudo-elements như là ::before, ::after, ::selection.
Để hiểu rõ hơn về các loại selector như inline, id, class, element.... thì các bạn xem lại các bài học phía trên nhé :)
Ở mục tiếp theo mình sẽ cùng tìm hiểu về cách tính specificity như thế nào?
3. Cách tính Specificity
Specificity được tính là những con số nguyên dương. Cụ thể như sau:
- Thuộc tính style inline là 1000
- ID là 100
- attribute, class hoặc pseudo-class là 10
- element hoặc pseudo-element là 1
<!DOCTYPE html>
<html>
<head>
<style>
span {background-color: red;}
#test span {
background-color: yellow;
}
</style>
</head>
<body>
<div id="test"><span style="background-color: green">Đây là thẻ span<br />
</body>
</html>Chúng ta tính độ ưu tiên từ ví dụ trên như sau:
Giả sử:
A: span {background-color: red;}
B: #test span {
background-color: yellow
}
C: <div id="test"><span style="background-color: green">Đây là thẻ span</span></div>
Ta có:
A là 1 (một phần tử là span)
B là 101 (một ID là test, là một phần tử là span)
C là 1000 (inline style)
Bởi vì 1 < 101 < 1000, quy tắc (C) có độ ưu tiên cao nhất, nên màu nền cho phần tử span là màu xanh lá cây.
Và kết quả của ví dụ trên:
Tiếp theo mình sẽ tìm hiểu một số quy tắc cho specificity.
4. Các quy tắc cho specificity
Công thức tính ra độ ưu tiên cho từng loại selector là những con số như 1000, 10, 1, 100, làm chúng ta rất khó nhớ. Có một số quy tắc thường hay được sử dụng sau sẽ làm chúng ta dễ nhớ hơn :)
Specificity bằng nhau (equal)
Nếu các selector có độ ưu tiên bằng nhau cùng thiết lập chung thuộc tính CSS cho một phần tử nào đó thì selector nào gần phần tử đó nhất sẽ được áp dụng.
Như ở ví dụ này, màu nền (background-color) của phần tử div sẽ là màu đỏ.
div {background-color: yellow;}
div {background-color: red;}ID selectors sẽ có độ ưu tiên cao hơn attribute selectors
Như ở ví dụ sau, màu nền (background-color) của phần tử div sẽ là màu xanh lá cây.
div#test {background-color: green;}
#test {background-color: yellow;}
div[id=test] {background-color: blue;}Class selector đánh bại bất kỳ element selectors
Như ở ví dụ sau, màu nền (background-color) của phần tử div sẽ là màu vàng.
.test {background-color: yellow;}
div {background-color: red;}Universal selector (*) and giá trị thừa kế (inherited ) có specificity là 0
universal selector (*) là tất cả phần tử của HTML.
(*) có specificity là 0 và các thuộc tính có giá trị là thừa kế (inherited) cũng có specificity là 0
5. Kết luận
Như vậy là mình đã trình bày xong về specificity trong CSS. Các bạn chỉ cần nhớ độ ưu tiên của loại selector và một số quy tắc của specificity là có thể vận dụng tốt được rồi. :)
Cuối cùng trong quá trình viết không tránh khỏi sai sót, nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để bài viết của mình ngày một tốt hơn.
Cám ơn các bạn đã đọc bài viết. Chúc các bạn vận dụng tốt.
Tham khảo: w3school.com
Khóa học nên xem
- 30 – HTML CSS cơ bản
- Bootstrap CSS Framework - CSS & Component
- Trang trí website bằng CSS
- Thiết kế website với HTML
- Thiết kế giao diện website với HTML và CSS
Nguồn: code24h.com
