Mức độ cụ thể

Podcast CSS – 003: Specificity

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 người sẽ tô màu nút màu đỏ và người còn lại sẽ tô màu xanh dương. Quy tắc nào được áp dụng cho phần tử? Tìm hiểu thuật toán về tính đặc trưng trong quy cách CSS là chìa khóa để 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 bốn giai đoạn riêng biệt của thác, nội dung này được đề cập trong mô-đun cuối cùng, trên thác.

Chấm điểm mức độ cụ thể

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

Với tính cụ thể trong một dự án thực tế, hành độ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, nhưng thường giữ điểm thấp để tránh tính phức tạp. Điểm số chỉ nên ở mức cao mà chúng ta cần, thay vì nhắm đến điểm cao nhất có thể. Trong tương lai, bạn có thể cần phải áp dụng một số CSS thực sự quan trọng hơn. Nếu bạ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 cho từng loại bộ chọn

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

Bộ chọn chung

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

* {
  color: red;
}

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

Phần tử (loại) hoặc phần tử giả bộ chọn nhận được 1 điểm cụ thể .

Bộ chọn loại

div {
  color: red;
}

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

::selection {
  color: red;
}

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

Một lớp, lớp học giả hoặc Bộ chọn thuộc tính nhận được 10 điểm cụ thể.

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;
}

:not() lớp giả không bổ sung gì vào phép tính cụ thể. Tuy nhiên, các 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ụ thể vì nó có một bộ chọn loại (div) và một lớp bên trong :not().

Bộ chọn mã nhận dạng

Mã nhận dạng bộ chọn nhận được 100 điểm cụ thể, 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 được áp dụng trực tiếp cho thuộc tính style của phần tử HTML, nhận được điểm cụ thể là 1.000 điểm. Điều này có nghĩa là để ghi đè lên 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 cụ thể là 10.000 điểm. Đây là mức độ 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 một tài sản CSS, vì vậy, mọi thứ trong quy tắc tổng thể (công cụ chọn và thuộc tính) không có cùng điểm cụ thể.

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

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về cách chấm điểm mức độ cụ thể

Tính cụ thể trong 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 thêm vào cùng nhau. Hãy xem xét HTML mẫu 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ụ thể:

a {
  color: red;
}

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

a.my-class {
  color: green;
}

Thêm lớp khác vào bộ chọn, giờ đâ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, giờ đây nó có 31 điểm cụ thể:

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ả lớp đó, bộ chọn sẽ có 41 điểm cụ thể:

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

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về cách chấm điểm mức độ cụ thể

Trực quan hoá những điểm cụ thể

Trong biểu đồ và máy tính độ đặc hiệu, tính cụ thể thường được trình bày 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à lớp giả. Nhóm cuối cùng là các bộ chọn phần tử và phần tử giả.

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

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

Kiểm tra kiến thức

Kiểm tra kiến thức của bạn về hình ảnh trực quan hoá tính cụ thể

Tăng tính cụ thể theo cách thiết thực

Giả sử chúng ta có một số CSS 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, bởi vì bộ chọn thứ hai nhận được 11 điểm cụ thể (0-1-1). Lý do là vì ứng dụng có một bộ chọn loại (button), tức là 1 điểm và bộ chọn thuộc tính ([onclick]), tức là 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 nâng cao quy tắc này, lặp lại bộ chọn lớp như sau:

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

button[onclick] {
  background: grey;
}

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

Một điểm số cụ thể phù hợp cho thấy trường hợp mới nhất chiến thắng

Bây giờ, hãy giữ nguyên ví dụ về nút và chuyển đổi CSS về như 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, khi đó, 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 phù hợp với tính cụ thể của một công cụ chọn khác nhắm mục tiêu đến cùng một phần tử.

Tài nguyên

• Tính đặc trưng của CSS
• Công cụ tính cụ thể
• Độ đặc hiệu của 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