Mức độ cụ thể

Podcast CSS – 003: Tính cụ thể

Giả sử bạn đang làm việc với HTML và CSS sau:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

Có hai quy tắc cạnh tranh ở đây. Một nút sẽ tô màu đỏ và nút còn lại sẽ tô màu xanh dương. Quy tắc nào được áp dụng cho phần tử? Việc hiểu thuật toán về tính cụ thể của thông số kỹ thuật CSS là chìa khoá để hiểu cách CSS quyết định giữa các quy tắc cạnh tranh.

Tính cụ thể là một trong 4 giai đoạn riêng biệt của tầng, được đề cập trong mô-đun trước, trên thác.

Điểm cụ thể

Mỗi quy tắc bộ chọn sẽ có một điểm số. Bạn có thể coi tính cụ thể là tổng điểm và mỗi loại bộ chọn sẽ nhận được điểm cho điểm số đó. Công cụ chọn có điểm số cao nhất sẽ chiến thắng.

Do tính đặc thù của một dự án thực tế, hoạt động cân bằng là đảm bảo các quy tắc CSS mà bạn muốn áp dụng, thực sự có áp dụng, trong khi thường duy trì điểm số thấp để tránh sự phức tạp. Điểm chỉ nên cao ở mức chúng tôi cần, thay vì nhắm đến điểm số cao nhất có thể. Trong tương lai, một số CSS thực sự quan trọng hơn có thể cần được áp dụng. Nếu muốn đạt điểm cao nhất, bạn sẽ khiến công việc đó trở nên khó khăn.

Chấm điểm từng loại bộ chọn

Mỗi loại bộ chọn sẽ nhận được điểm. Bạn cộng tất cả các điểm này lại để tính toán tính cụ thể tổng thể của bộ chọn.

Bộ chọn chung

Bộ chọn chung (*) không có đặc điểm cụ thể và nhận 0 điểm. Điều này có nghĩa là bất kỳ quy tắc nào có 1 hoặc nhiều điểm sẽ ghi đè quy tắc đó

* {
  color: red;
}

Bộ chọn phần tử hoặc giả phần tử

Bộ chọn phần tử (loại) hoặc phần tử giả sẽ có 1 điểm đặc trưng .

Bộ chọn loại

div {
  color: red;
}

Bộ chọn phần tử giả

::selection {
  color: red;
}

Bộ chọn lớp, lớp giả hoặc bộ chọn thuộc tính

Bộ chọn lớp, lớp giả hoặc thuộc tính sẽ nhận được 10 điểm đặc trưng.

Bộ chọn lớp

.my-class {
  color: red;
}

Bộ chọn lớp giả

:hover {
  color: red;
}

Bộ chọn thuộc tính

[href='#'] {
  color: red;
}

Bản thân lớp giả :not() không bổ sung gì vào kết quả tính toán cụ thể. Tuy nhiên, bộ chọn được truyền vào dưới dạng đối số sẽ được thêm vào phép tính cụ thể.

div:not(.my-class) {
  color: red;
}

Mẫu này sẽ có 11 điểm đặc trưng vì có một bộ chọn loại (div) và một lớp bên trong :not().

Bộ chọn mã

Bộ chọn mã nhận dạng sẽ nhận được 100 điểm đặc trưng, miễn là bạn sử dụng bộ chọn mã nhận dạng (#myID) chứ không phải bộ chọn thuộc tính ([id="myID"]).

#myID {
  color: red;
}

Thuộc tính kiểu cùng dòng

CSS áp dụng trực tiếp cho thuộc tính style của phần tử HTML sẽ nhận được điểm đặc trưng là 1.000 điểm. Tức là để ghi đè mã này trong CSS, bạn phải viết một bộ chọn cực kỳ cụ thể.

<div style="color: red"></div>

luật !important

Cuối cùng, !important ở cuối giá trị CSS sẽ nhận được điểm số cụ thể là 10.000 điểm. Đây là đặc điểm cụ thể cao nhất mà một mặt hàng riêng lẻ có thể nhận được.

Quy tắc !important được áp dụng cho thuộc tính CSS. Do đó, mọi thành phần trong quy tắc tổng thể (bộ chọn và thuộc tính) sẽ không nhận được cùng một điểm số về mức độ cụ thể.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về cách tính điểm đặc trưng

Tính cụ thể theo bối cảnh

Tính cụ thể của mỗi bộ chọn khớp với một phần tử sẽ được cộng với nhau. Hãy xem xét HTML ví dụ sau:

<a class="my-class another-class" href="#">A link</a>

Đường liên kết này có hai lớp. Thêm CSS sau đây và CSS sẽ nhận được 1 điểm đặc biệt:

a {
  color: red;
}

Tham chiếu một trong các lớp trong quy tắc này, quy tắc này hiện có 11 điểm cụ thể:

a.my-class {
  color: green;
}

Thêm lớp khác vào bộ chọn, hiện lớp này có 21 điểm cụ thể:

a.my-class.another-class {
  color: rebeccapurple;
}

Thêm thuộc tính href vào bộ chọn, thuộc tính này hiện có 31 điểm đặc trưng:

a.my-class.another-class[href] {
  color: goldenrod;
}

Cuối cùng,hãy thêm một lớp giả :hover vào tất cả những mục đó, bộ chọn sẽ có 41 điểm cụ thể:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về cách tính điểm đặc trưng

Trực quan hoá tính cụ thể

Trong sơ đồ và công cụ tính tính cụ thể, tính cụ thể thường được thể hiện như sau:

Nhóm bên trái là id bộ chọn. Nhóm thứ hai là bộ chọn lớp, thuộc tính và giả lớp. Nhóm cuối cùng là các bộ chọn phần tử và giả phần tử.

Để tham khảo, bộ chọn sau là 0-4-1:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

Kiểm tra mức độ hiểu biết của bạn

Kiểm tra kiến thức của bạn về cách trực quan hoá đặc trưng

Tăng tính cụ thể một cách thực tế

Giả sử chúng ta có một số CSS giống như sau:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Với HTML có dạng như sau:

<button class="my-button" onclick="alert('hello')">Click me</button>

Nút này có nền màu xám, vì bộ chọn thứ hai nhận được 11 điểm đặc trưng (0-1-1). Điều này là do nút này có một bộ chọn loại (button), là 1 điểm và một bộ chọn thuộc tính ([onclick]), tương đương với 10 điểm.

Quy tắc trước đó — .my-button — nhận được 10 điểm (0-1-0), vì có một bộ chọn lớp.

Nếu bạn muốn tăng hiệu suất cho quy tắc này, hãy lặp lại bộ chọn lớp như sau:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

Bây giờ, nút này sẽ có nền màu xanh dương vì bộ chọn mới có điểm số về mức độ cụ thể là 20 điểm (0-2-0).

Điểm số đặc trưng trùng khớp cho thấy phiên bản mới nhất giành chiến thắng

Bây giờ, hãy giữ nguyên ví dụ về nút này và chuyển đổi CSS sang ví dụ sau:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

Nút này có nền màu xám, vì cả hai bộ chọn đều có điểm số cụ thể giống hệt nhau (0-1-0).

Nếu bạn chuyển đổi các quy tắc theo thứ tự nguồn, nút này sẽ có màu xanh dương.

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

Đây là trường hợp duy nhất mà CSS mới giành chiến thắng. Để làm như vậy, bộ chọn phải khớp với đặc điểm của một bộ chọn khác nhắm mục tiêu cùng một phần tử.

Tài nguyên

• Đặc điểm của CSS
• Công cụ tính cụ thể
• Tính cụ thể của gói thuê bao di động (MDN)
• Thông tin cụ thể về tính đặc thù của CSS
• Một công cụ tính cụ thể khác