Bộ chọn CSS theo thứ tự giảm dần

Không cho phép các bộ chọn có độ đặc hiệu thấp hơn xuất hiện sau khi ghi đè các bộ chọn có độ đặc hiệu cao hơn

    #container a { top: 10px; } a { top: 0; }
/** ↑                           ↑
 * The order of these selectors represents descending specificity */

Thứ tự nguồn rất quan trọng trong CSS và khi hai bộ chọn có cùng độ đặc hiệu, bộ chọn xuất hiện sau cùng sẽ được ưu tiên. Tuy nhiên, tình hình sẽ khác khi một trong các bộ chọn có độ đặc hiệu cao hơn. Trong trường hợp đó, thứ tự nguồn không thành vấn đề. bộ chọn có độ đặc hiệu cao hơn sẽ thắng ngay cả khi nó đến trước

Sự xung đột của hai cơ chế ưu tiên, thứ tự nguồn và tính đặc hiệu này có thể gây ra một số nhầm lẫn khi đọc biểu định kiểu. Nếu một bộ chọn có độ đặc hiệu cao hơn xuất hiện trước bộ chọn mà nó ghi đè, thì chúng tôi phải suy nghĩ kỹ hơn để hiểu nó, vì nó vi phạm kỳ vọng của thứ tự nguồn. Biểu định kiểu dễ đọc nhất khi bộ chọn ghi đè luôn xuất hiện sau bộ chọn mà chúng ghi đè. Bằng cách đó, cả cơ chế, thứ tự nguồn và tính đặc hiệu, hoạt động cùng nhau một cách độc đáo

Quy tắc này thực thi phương pháp đó tốt nhất có thể, báo cáo ít lỗi hơn mức cần thiết. Nó không thể bắt được mọi bộ chọn ghi đè thực tế, nhưng nó có thể bắt được một số lỗi phổ biến

Chúng tôi khuyên bạn nên tắt quy tắc này nếu bạn sử dụng nhiều cách lồng

Làm thế nào nó hoạt động

Quy tắc này xem xét bộ chọn kết hợp cuối cùng trong mọi bộ chọn đầy đủ, sau đó so sánh nó với các bộ chọn khác trong biểu định kiểu kết thúc theo cùng một cách

Vì vậy,

.component1 a {}
.component1 a:hover {}
.component2 a {}

6 [có bộ chọn ghép cuối cùng là

.component1 a {}
.component1 a:hover {}
.component2 a {}

7] sẽ được so sánh với

.component1 a {}
.component1 a:hover {}
.component2 a {}

7 và

.component1 a {}
.component1 a:hover {}
.component2 a {}

9, nhưng không phải với

b a {}
a {}

0 hoặc

b a {}
a {}

1

Và

b a {}
a {}

2 [có bộ chọn ghép cuối cùng là

b a {}
a {}

3] sẽ được so sánh với

b a {}
a {}

4 và

b a {}
a {}

5, nhưng không phải với

b a {}
a {}

6 hoặc

b a {}
a {}

7, v.v.

Các bộ chọn nhắm mục tiêu phần tử giả không được coi là có thể so sánh với các bộ chọn tương tự không có phần tử giả vì chúng nhắm mục tiêu các phần tử khác trên trang được hiển thị. Ví dụ:

b a {}
a {}

8 sẽ không được so sánh với

b a {}
a {}

9, bởi vì

a + a {}
a {}

0 nhắm mục tiêu phần tử giả trong khi

a + a {}
a {}

1 nhắm mục tiêu thực tế

a + a {}
a {}

2

Quy tắc này chỉ so sánh các quy tắc trong cùng ngữ cảnh phương tiện. Vì vậy,

a + a {}
a {}

3 là tốt

Quy tắc này giải quyết các bộ chọn lồng nhau trước khi tính toán độ đặc hiệu của các bộ chọn

Hạn chế DOM

Kẻ nói dối chỉ có thể kiểm tra CSS để kiểm tra thứ tự cụ thể. Nó không có quyền truy cập vào HTML hoặc DOM để diễn giải việc sử dụng CSS

Điều này có thể dẫn đến các lỗi linting hợp lệ thoạt nhìn có vẻ không hợp lệ

Ví dụ sau đây sẽ gây ra lỗi

.component1 a {}
.component1 a:hover {}
.component2 a {}

Đây là một lỗi chính xác vì

a + a {}
a {}

1 trên dòng 2 có độ đặc hiệu cao hơn so với

a + a {}
a {}

5 trên dòng 3

Điều này có thể dẫn đến nhầm lẫn vì "hai bộ chọn sẽ không bao giờ khớp với cùng một

a + a {}
a {}

5 trong DOM". Tuy nhiên, vì kẻ nói dối không có quyền truy cập vào DOM nên nó không thể đánh giá điều này và do đó báo cáo chính xác lỗi về độ đặc hiệu giảm dần

Có thể cơ cấu lại CSS của bạn để loại bỏ lỗi, nếu không, bạn nên tắt quy tắc cho dòng đó và để lại nhận xét cho biết tại sao nên bỏ qua lỗi. Lưu ý rằng việc tắt quy tắc sẽ gây ra các lỗi hợp lệ bổ sung không được báo cáo

Làm cách nào để đặt hàng bộ chọn CSS?

Bộ chọn hậu duệ là gì?

Bộ chọn CSS nào có mức độ ưu tiên cao nhất?

Làm cách nào để chọn tất cả con cháu trong CSS?