Hướng dẫn what has the highest specificity in css? - cái gì có tính đặc hiệu cao nhất trong css?

Tính đặc hiệu được tính toán như thế nào?

Tính đặc hiệu là một thuật toán tính toán trọng lượng được áp dụng cho khai báo CSS nhất định. Trọng lượng được xác định bởi số lượng bộ chọn của từng loại trọng lượng trong bộ chọn khớp với phần tử (hoặc yếu tố giả). Nếu có hai hoặc nhiều khai báo cung cấp các giá trị thuộc tính khác nhau cho cùng một phần tử, giá trị khai báo trong khối kiểu có bộ chọn phù hợp với trọng số thuật toán lớn nhất được áp dụng.

Thuật toán đặc hiệu về cơ bản là giá trị ba cột của ba loại hoặc trọng số - ID, lớp và loại - tương ứng với ba loại bộ chọn. Giá trị đại diện cho số lượng của các thành phần chọn trong mỗi loại trọng lượng và được viết là ID - loại - loại. Ba cột được tạo bằng cách đếm số lượng thành phần chọn cho mỗi loại trọng số chọn trong các bộ chọn khớp với phần tử.

Thể loại trọng lượng chọn

Các loại trọng số chọn được liệt kê ở đây theo thứ tự giảm độ đặc hiệu:

Chỉ bao gồm các bộ chọn ID, chẳng hạn như

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

Bao gồm các bộ chọn lớp, chẳng hạn như

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

Bao gồm các bộ chọn loại, chẳng hạn như

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

Bộ chọn phổ quát (

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

Các bộ kết hợp, chẳng hạn như

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

Tiêu cực giả lớp,

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

Bộ chọn phù hợp

Trọng lượng đặc hiệu đến từ bộ chọn phù hợp. Lấy bộ chọn CSS này với ba bộ chọn phân tách bằng dấu phẩy làm ví dụ:

[type="password"],
input:focus,
:root #myApp input:required {
  color: blue;
}

Bộ chọn

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

Tất cả các đầu vào, bất kể loại, khi nhận được tiêu điểm, khớp với bộ chọn thứ hai trong danh sách,

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

Độ đặc hiệu cho một đầu vào cần thiết được lồng trong một phần tử có thuộc tính

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

Nếu loại đầu vào mật khẩu được lồng trong một phần tử với

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

So sánh ba cột

Khi các giá trị độ đặc hiệu của các bộ chọn có liên quan được xác định, số lượng các thành phần chọn trong mỗi cột được so sánh, từ trái sang phải.

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

Cột đầu tiên là giá trị của thành phần ID, là số lượng ID trong mỗi bộ chọn. Các số trong các cột ID của các bộ chọn cạnh tranh được so sánh. Bộ chọn có giá trị lớn hơn trong cột ID thắng bất kể giá trị nào trong các cột khác. Trong ví dụ trên, mặc dù bộ chọn màu vàng có nhiều thành phần hơn, nhưng chỉ có giá trị của cột đầu tiên quan trọng.

Nếu số trong các cột ID của các bộ chọn cạnh tranh là như nhau, thì cột tiếp theo, lớp, được so sánh, như được hiển thị bên dưới.

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

Cột lớp là số lượng của tên lớp, bộ chọn thuộc tính và lớp giả trong bộ chọn. Khi giá trị cột ID giống nhau, bộ chọn có giá trị lớn hơn trong cột lớp sẽ thắng, bất kể giá trị trong cột Loại. Điều này được hiển thị trong ví dụ dưới đây.

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

Nếu các số trong các cột lớp và ID trong các bộ chọn cạnh tranh là như nhau, cột loại sẽ có liên quan. Cột loại là số loại phần tử và yếu tố giả trong bộ chọn. Khi hai cột đầu tiên có cùng giá trị, bộ chọn có số lượng lớn hơn trong cột sẽ thắng.

Nếu các bộ chọn cạnh tranh có cùng giá trị trong cả ba cột, thì quy tắc lân cận xuất hiện, trong đó kiểu được khai báo cuối cùng được ưu tiên.

input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}

Các ngoại lệ :root input { color: green; /* 0-1-1 - WINS because CLASS column is greater */ } html body main input { color: yellow; /* 0-0-4 */ } 5, :root input { color: green; /* 0-1-1 - WINS because CLASS column is greater */ } html body main input { color: yellow; /* 0-0-4 */ } 4 và :root input { color: green; /* 0-1-1 - WINS because CLASS column is greater */ } html body main input { color: yellow; /* 0-0-4 */ } 6

Các trận đấu-bất kỳ pseudo-Class

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

p {
  /* 0-0-1 */
}
:is(p) {
  /* 0-0-1 */
}

h2:nth-last-of-type(n + 2) {
  /* 0-1-1 */
}
h2:has(~ h2) {
  /* 0-0-2 */
}


div.outer p {
  /* 0-1-2 */
}
div:not(.inner) p {
  /* 0-1-2 */
}

Lưu ý rằng trong cặp CSS ở trên, trọng số độ đặc hiệu được cung cấp bởi các lớp giả

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

Tất cả ba trong số các lớp giả này đều chấp nhận danh sách bộ chọn phức, một danh sách các bộ chọn phân tách bằng dấu phẩy, như một tham số. Tính năng này có thể được sử dụng để tăng tính đặc hiệu của bộ chọn:

:is(p, #fakeId) {
  /* 1-0-0 */
}
h2:has(+ h2, > #fakeId) {
  /* 1-0-1 */
}
p:not(#fakeId) {
  /* 1-0-1 */
}
div:not(.inner, #fakeId) p {
  /* 1-0-2 */
}

Trong khối mã CSS trên, chúng tôi đã đưa

:is(p, #fakeId) {
  /* 1-0-0 */
}
h2:has(+ h2, > #fakeId) {
  /* 1-0-1 */
}
p:not(#fakeId) {
  /* 1-0-1 */
}
div:not(.inner, #fakeId) p {
  /* 1-0-2 */
}

:is(p, #fakeId) {
  /* 1-0-0 */
}
h2:has(+ h2, > #fakeId) {
  /* 1-0-1 */
}
p:not(#fakeId) {
  /* 1-0-1 */
}
div:not(.inner, #fakeId) p {
  /* 1-0-2 */
}

:is(p, #fakeId) {
  /* 1-0-0 */
}
h2:has(+ h2, > #fakeId) {
  /* 1-0-1 */
}
p:not(#fakeId) {
  /* 1-0-1 */
}
div:not(.inner, #fakeId) p {
  /* 1-0-2 */
}

Nói chung, bạn muốn giữ tính đặc hiệu ở mức tối thiểu, nhưng nếu bạn cần tăng tính đặc hiệu của một yếu tố vì một lý do cụ thể, ba lớp giả này có thể giúp ích.

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Trong ví dụ này, tất cả các liên kết sẽ có màu xanh, trừ khi được ghi đè bởi một khai báo liên kết với 3 ID trở lên, giá trị màu khớp với

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Phong cách nội tuyến

Các kiểu nội tuyến được thêm vào một yếu tố (ví dụ:

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Cách duy nhất để ghi đè các kiểu nội tuyến là sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Nhiều khung JavaScript và thư viện thêm các kiểu nội tuyến. Sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

<p style="color: purple">…p>

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Đảm bảo bao gồm một nhận xét với mỗi lần bao gồm các lá cờ quan trọng để người bảo trì mã hiểu tại sao một mẫu chống CSS được sử dụng.

Ngoại lệ a:not(#fakeId#fakeId#fakeID) { color: blue; /* 3-0-1 */ } 1

Các khai báo CSS được đánh dấu là ghi đè quan trọng bất kỳ khai báo nào khác trong cùng một lớp và nguồn gốc. Mặc dù về mặt kỹ thuật,

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Nếu các khai báo từ cùng một nguồn gốc và xung đột lớp xếp tầng và một giá trị tài sản có bảng cờ

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Thay vì sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Ngoại lệ #myElement { color: yellow; /* 1-0-0 */ } #myApp [id="myElement"] { color: green; /* 1-1-0 - WINS!! */ } 9

Tính đặc hiệu-điều chỉnh độ giả pseudo

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

<p style="color: purple">…p>

Khi tạo CSS của bên thứ ba được sử dụng bởi các nhà phát triển không có quyền truy cập để chỉnh sửa CSS của bạn, đó là một thực tiễn tốt để tạo CSS với độ đặc hiệu thấp nhất có thể. Ví dụ: nếu chủ đề của bạn bao gồm các CSS sau:

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Sau đó, nhà phát triển triển khai tiện ích có thể dễ dàng ghi đè màu liên kết chỉ bằng bộ chọn loại.

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Mẹo xử lý chứng đau đầu tính đặc hiệu

Thay vì sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Làm cho các bộ chọn cụ thể có và không có thêm tính đặc hiệu

Bằng cách chỉ ra phần của tài liệu bạn đang tạo kiểu trước phần tử bạn chọn, quy tắc trở nên cụ thể hơn. Tùy thuộc vào cách bạn thêm nó, bạn có thể thêm một số, rất nhiều hoặc không có tính cụ thể, như được hiển thị bên dưới:

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Bất kể thứ tự, tiêu đề sẽ có màu xanh vì quy tắc đó là cụ thể nhất.

Giảm độ đặc hiệu ID

Tính đặc hiệu dựa trên hình thức của một bộ chọn. Bao gồm

<p style="color: purple">…p>

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Bạn cũng có thể bao gồm

<p style="color: purple">…p>

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

Tăng tính đặc hiệu bằng cách nhân đôi bộ chọn

Là một trường hợp đặc biệt để tăng tính đặc hiệu, bạn có thể nhân đôi các trọng số từ các cột lớp hoặc ID. Việc nhân đôi ID, lớp, pseudo-class hoặc bộ chọn thuộc tính trong bộ chọn hợp chất sẽ tăng tính đặc hiệu khi ghi đè các bộ chọn rất cụ thể mà bạn không có quyền kiểm soát.

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Sử dụng điều này một cách tiết kiệm, nếu ở tất cả. Nếu sử dụng sao chép chọn, hãy luôn bình luận CSS của bạn.

Bằng cách sử dụng

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}

<p style="color: purple">…p>

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Ưu tiên hơn CSS của bên thứ ba

Tận dụng các lớp xếp tầng là cách tiêu chuẩn để cho phép một tập hợp các kiểu được ưu tiên hơn một bộ kiểu khác; Các lớp Cascade cho phép điều này mà không cần sử dụng tính đặc hiệu! Phong cách tác giả bình thường (không quan trọng) được nhập vào các lớp Cascade có mức độ ưu tiên thấp hơn so với các kiểu tác giả chưa được cấp.

Nếu Styles đến từ một biểu định kiểu bạn không thể chỉnh sửa hoặc không hiểu và bạn cần ghi đè kiểu, một chiến lược là nhập các kiểu bạn không kiểm soát vào lớp Cascade. Các phong cách trong các lớp được tuyên bố sau đó được ưu tiên, với các kiểu chưa được xếp hạng có quyền ưu tiên trên tất cả các phong cách xếp lớp từ cùng một nguồn gốc.

Khi hai bộ chọn từ các lớp khác nhau phù hợp với cùng một phần tử, nguồn gốc và tầm quan trọng được ưu tiên; Tính đặc hiệu của bộ chọn trong bảng kiểu mất là không liên quan.

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Trong ví dụ trên, tất cả văn bản đoạn văn, bao gồm nội dung lồng nhau, sẽ là

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Tránh và ghi đè a:not(#fakeId#fakeId#fakeID) { color: blue; /* 3-0-1 */ } 1

Cách tiếp cận tốt nhất là không sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Để loại bỏ nhu cầu nhận thức về

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

• Tăng tính đặc hiệu của bộ chọn của tuyên bố

  a:not(#fakeId#fakeId#fakeID) {
    color: blue; /* 3-0-1 */
  }
  

  1 trước đây để nó lớn hơn các khai báo khác
• Cho nó tính đặc hiệu tương tự và đặt nó sau khi tuyên bố, nó có nghĩa là ghi đè
• Giảm độ đặc hiệu của bộ chọn bạn đang cố gắng ghi đè.

Tất cả các phương pháp này được đề cập trong các phần trước.

Nếu bạn không thể xóa các cờ

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}

Phương pháp 1

1. Tạo một bảng kiểu ngắn, riêng biệt chỉ chứa các khai báo quan trọng đặc biệt ghi đè lên bất kỳ tuyên bố quan trọng nào mà bạn không thể xóa.
2. Nhập kiểu kiểu này dưới dạng nhập đầu tiên trong CSS của bạn bằng cách sử dụng

   [type="password"]             /* 0-1-0 */
   input:focus                   /* 0-1-1 */
   :root #myApp input:required   /* 1-2-1 */
   

   14, bao gồm câu lệnh

   [type="password"]             /* 0-1-0 */
   input:focus                   /* 0-1-1 */
   :root #myApp input:required   /* 1-2-1 */
   

   15, trước khi liên kết với các bảng kiểu khác. Điều này là để đảm bảo rằng các khoản ghi đè quan trọng được nhập dưới dạng lớp đầu tiên.

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Phương pháp 2

1. Khi bắt đầu các khai báo biểu định kiểu của bạn, hãy tạo một lớp Cascade có tên, như vậy:

   [type="password"]             /* 0-1-0 */
   input:focus                   /* 0-1-1 */
   :root #myApp input:required   /* 1-2-1 */
   

   9

2. Mỗi lần bạn cần ghi đè một tuyên bố quan trọng, hãy khai báo nó trong lớp được đặt tên. Chỉ khai báo các quy tắc quan trọng trong lớp.

   #myElement {
     color: green; /* 1-0-0  - WINS!! */
   }
   .bodyClass .sectionClass .parentClass [id="myElement"] {
     color: yellow; /* 0-4-0 */
   }
   

   0

Tính đặc hiệu của bộ chọn của phong cách quan trọng trong lớp có thể thấp, miễn là nó phù hợp với phần tử bạn đang cố gắng ghi đè. Các lớp bình thường nên được khai báo bên ngoài lớp vì các kiểu lớp có mức độ ưu tiên thấp hơn so với các kiểu chưa được đặt.

Sự thiếu hiểu biết của cây

Sự gần gũi của một yếu tố với các yếu tố khác được tham chiếu trong một bộ chọn nhất định không có tác động đến tính đặc hiệu.

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

Các yếu tố

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Các yếu tố được nhắm mục tiêu trực tiếp so với các kiểu di truyền

Các kiểu cho một yếu tố được nhắm mục tiêu trực tiếp sẽ luôn được ưu tiên hơn các kiểu di truyền, bất kể tính đặc thù của quy tắc được kế thừa. Cho CSS và HTML sau:

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Ví dụ

Trong các CSS sau, chúng tôi có ba bộ chọn nhắm mục tiêu các yếu tố

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

Nếu các bộ chọn ở trên, tất cả các mục tiêu cùng một đầu vào, đầu vào sẽ có màu đỏ, vì khai báo đầu tiên có giá trị cao nhất trong cột ID.

Bộ chọn cuối cùng có bốn thành phần loại. Mặc dù nó có giá trị số nguyên cao nhất, bất kể có bao nhiêu yếu tố và yếu tố giả được bao gồm, ngay cả khi có 150, các thành phần loại không bao giờ được ưu tiên hơn các thành phần lớp. Các giá trị cột được so sánh bắt đầu từ trái sang phải khi các giá trị cột bằng nhau.

Nếu chúng tôi đã chuyển đổi bộ chọn ID trong mã ví dụ ở trên thành bộ chọn thuộc tính, hai bộ chọn đầu tiên sẽ có cùng độ đặc hiệu, như được hiển thị bên dưới:

#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

Khi nhiều khai báo có độ đặc hiệu bằng nhau, khai báo cuối cùng được tìm thấy trong CSS được áp dụng cho phần tử. Nếu cả hai bộ chọn đều phù hợp với cùng

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */

Ghi chú bổ sung

Một vài điều cần nhớ về tính đặc hiệu:

1. Độ đặc hiệu chỉ áp dụng khi cùng một phần tử được nhắm mục tiêu bởi nhiều khai báo trong cùng một lớp hoặc nguồn gốc. Tính đặc hiệu chỉ quan trọng đối với các tuyên bố có cùng tầm quan trọng và cùng một lớp và lớp tầng. Nếu các bộ chọn khớp có nguồn gốc khác nhau, Cascade xác định khai báo nào được ưu tiên.
2. Khi hai bộ chọn trong cùng một lớp tầng và nguồn gốc có cùng độ đặc hiệu, sự gần gũi là rất quan trọng; Bộ chọn cuối cùng chiến thắng.
3. Theo quy tắc CSS, các yếu tố được nhắm mục tiêu trực tiếp sẽ luôn được ưu tiên hơn các quy tắc mà một yếu tố kế thừa từ tổ tiên của nó.
4. Sự gần gũi của các phần tử trong cây tài liệu không ảnh hưởng đến tính đặc hiệu.

Xem thêm