Khái niệm CSS Specificity không chỉ là một chút líu lưỡi (hãy thử nói nó nhanh gấp ba lần!), Mà nó cũng có thể là một chút suy nghĩ! Đó là một trong những khái niệm khó nắm bắt hơn trong CSS. Trong bài viết này, chúng tôi sẽ đề cập đến ý nghĩa của chúng tôi về tính cụ thể, cách tính toán và cách xếp hạng của các bộ chọn xác định kiểu được hiển thị trên trang. Vì vậy, không băn khoăn! Bạn sẽ nhanh chóng trở thành một chuyên gia về tính cụ thể.
"Tính đặc hiệu" có nghĩa là gì?
Tính cụ thể của CSS về cơ bản đề cập đến tầm quan trọng của một bộ chọn. Mỗi bộ chọn được gán một đặc tính cụ thể tùy thuộc vào loại nó là gì. Số lượng bộ chọn càng cao, nó càng cụ thể và càng có nhiều khả năng rằng khối CSS cụ thể đó sẽ chiến thắng trong các cuộc chiến tạo kiểu.
Tính cụ thể được biểu thị bằng bốn số, mỗi số được phân tách bằng dấu phẩy:
Selector specificity = 0, 0, 0, 0
Khi chúng tôi xem xét tính cụ thể dưới dạng một chuỗi bốn số không có dấu phẩy (tức là 0000, 0101, 1001, v.v.), giá trị cao hơn con số là cụ thể hơn nó là.
Tính cụ thể của người chọn theo thứ hạng (thấp - cao):
Hãy cùng tìm hiểu các loại yếu tố khác nhau dựa trên xếp hạng:
- ＊
Bộ chọn đa năng. Độ cụ thể của nó là 0, 0, 0, 0. Thông thường, bạn sẽ thấy những thứ này ở đầu các biểu định kiểu. Đây là mức thấp nhất trong xếp hạng về mức độ quan trọng. Khá nhiều thứ sẽ ghi đè nó hoặc thêm vào CSS bộ chọn phổ quát.
- ＞, ➕, ‘‘, ∼
Các tổ hợp, thường được nhìn thấy khi chọn anh chị em của con của bộ chọn kiểu hoặc bộ chọn lớp, không ảnh hưởng đến tính đặc hiệu và không được tính vào số tổng thể. Các lớp giả phủ định (:not) cũng phù hợp với loại tính cụ thể này.
- div, form, ul, li, v.v.
Đây là loại bộ chọn. Các bộ chọn này bao gồm bất kỳ thứ gì có thể được coi là thẻ trong HTML của bạn. Trọng số cụ thể của nó là 0, 0, 0, 1. Nếu bạn có nhiều bộ chọn loại nối tiếp nhau được phân tách bằng bộ tổ hợp, bạn sẽ thêm các bộ chọn lại với nhau:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
div li {} ⇐ the specificity is 0,0,0,2
div li p {} ⇐ the specificity is 0,0,0,3 - .main-container, .navbar, [type =”text”],:hover
Tiếp theo về tính cụ thể là các bộ chọn lớp, thuộc tính và lớp giả.
Bộ chọn lớp được biểu thị bằng dấu chấm (“.”) Ở đầu. Bộ chọn thuộc tính có một thuộc tính bên trong dấu ngoặc vuông bên cạnh bộ chọn loại của nó. Bộ chọn lớp giả được dành riêng cho các phần tử đặc biệt cần tạo kiểu cụ thể hơn. Chúng có độ đặc trưng là 0, 0, 1, 0.
div.navlink a {} - Độ đặc hiệu là 0, 0, 1, 1 vì chúng ta có một bộ chọn lớp và chúng ta có một bộ chọn kiểu.
div.header li.list-item-disc button[type="submit"] {} - Độ đặc hiệu là 0, 0, 3, 3 vì chúng ta có 3 bộ chọn kiểu và 2 bộ chọn lớp + 1 bộ chọn thuộc tính. Nếu chúng tôi tắt bộ chọn thuộc tính, độ cụ thể sẽ là 0, 0, 2, 3. Vì 23 nhỏ hơn 33, bộ chọn CSS với độ cụ thể 0, 0, 3, 3 sẽ giành chiến thắng vì nó có độ cụ thể cao hơn.
- #blue, #hiised, v.v.
Bộ chọn ID có độ cụ thể cao nhất trong số các bộ chọn CSS:1, 0, 0, 0. Do tính chất duy nhất của định nghĩa thuộc tính ID, chúng tôi thường tạo kiểu cho một phần tử thực sự cụ thể khi chúng tôi gọi ID trong CSS của mình.
div#orange {} - Độ đặc hiệu là 1, 0, 0, 1 vì chúng ta có bộ chọn kiểu và bộ chọn ID. Phong cách nào giành chiến thắng theo các quy tắc cụ thể của chúng tôi trong số các điều sau đây?
div#orange {
background-color: orange;
}
div.square {
background-color: green;
width: 150px;
height: 150px;
} - div đầu tiên có một bộ chọn loại và một bộ chọn ID, làm cho nó trở nên cụ thể tổng thể là 1, 0, 0, 1.
- div thứ hai có một bộ chọn loại và một bộ chọn lớp, làm cho nó trở nên cụ thể về tổng thể 0, 0, 1, 1.
Vì 1001 lớn hơn 11, div đầu tiên thắng và màu nền sẽ là màu cam, trái với bản chất phân tầng của CSS.
- Inline-style
Làm thế nào để tạo kiểu nội tuyến phù hợp với tất cả những điều này? Nó thậm chí còn nhiều hơn nữa cụ thể hơn bộ chọn ID. Kiểu nội tuyến sẽ chiếm ưu thế về bất kỳ thứ gì trong tệp CSS của bạn. Nó có trọng số cao nhất về tính cụ thể.
-
!importantquy tắc
!important từ khóa vượt trội hơn mọi thứ. Đây là quy tắc cụ thể nhất và sẽ ghi đè lên bất kỳ quy tắc nào trước đó do CSS đặt ra.
Thực hành
Trong trình chỉnh sửa mã bên dưới, tôi đã tạo một trang chứa mẫu với một số tên lớp và tên ID ngẫu nhiên. Tôi muốn bạn dành một chút thời gian và thực hành sử dụng các kỹ năng CSS của mình để thay đổi các phần tử cụ thể thành một màu khác trong khi tất cả các div khác vẫn giữ nguyên màu đó. Bạn sẽ viết những quy tắc đó như thế nào trong CSS? Bạn sẽ sử dụng những gì để có được độ cụ thể cao nhất nếu đó là những gì bạn cần sử dụng để nhắm mục tiêu một phần tử nhất định.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Specificity</title>
<style>
body {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
main {
width: 100%;
height: 800px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
div {
text-align: center;
}
*.square {
/* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis? */
height: 150px;
width: 150px;
background-color: black;
color: white;
margin: 20px;
}
div.flex {
/* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
*/
display: flex;
justify-content: center;
align-items: center;
}
div#red {
/* why does this one win out? What is the specificity of this div? */
background-color: darkred;
}
#red {
/* What would happen if we took the 'div' out of the previous selector? Which one wins? */
background-color: red;
}
main > div {
font-size: 55px;
font-weight: bold;
}
div#self-align {
/* What happens here? */
align-self: center;
}
</style>
</head>
<body>
<main>
<div id="self-align" class="square flex">1</div>
<div class="square flex">2</div>
<div class="square flex">3</div>
<div class="square flex">4</div>
<div class="square flex">5</div>
<div id="red" class="square flex">6</div>
<div class="square flex">7</div>
<div class="square flex">8</div>
<div class="square flex">9</div>
<div class="square flex">10</div>
<div class="square flex">11</div>
<div class="square flex">12</div>
</main>
</body>
</html> Kết luận
Trong bài viết này, chúng ta đã thảo luận về Tính đặc hiệu của CSS - cụ thể là những bộ chọn nào cụ thể hơn những bộ chọn khác và cách chúng tôi tìm ra con số cụ thể thực tế. Đừng nản lòng nếu nó không đến với bạn ngay lập tức trong lần đọc đầu tiên. Đây là rất nhiều thông tin để tiêu hóa. Hãy tiếp tục và bạn sẽ sớm đạt được nó!