Làm cách nào để ghi đè CSS đã quan trọng?

Tính đặc hiệu là một thuật toán tính toán trọng số được áp dụng cho một khai báo CSS nhất định. Trọng số được xác định bởi số lượng trong bộ chọn khớp với phần tử (hoặc phần 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ử, thì giá trị khai báo trong khối kiểu có bộ chọn khớp với trọng số thuật toán lớn nhất sẽ được áp dụng

Thuật toán tính đặc hiệu về cơ bản là một giá trị ba cột gồm ba danh mục 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 thành phần bộ chọn trong mỗi loại trọng lượng và được viết là ID - LỚP - LOẠI. Ba cột được tạo bằng cách đếm số lượng thành phần bộ chọn cho từng loại trọng số bộ chọn trong bộ chọn khớp với phần tử

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

Chỉ bao gồm 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 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!! */
}

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 */
}

Lớp giả phủ đị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 */
}

bộ chọn phù hợp

Trọng lượng cụ thể đến từ bộ chọn phù hợp. Lấy bộ chọn CSS này với ba bộ chọn được 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ả đầu vào, bất kể loại nào, 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 */
}

Tính cụ thể của đầu vào bắt buộc đượ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ử có bộ

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 */

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 bộ 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ộ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 sẽ thắng bất kể giá trị trong các cột khác là gì. Trong ví dụ trên, mặc dù bộ chọn màu vàng có tổng cộng nhiều thành phần hơn nhưng chỉ có giá trị của cột đầu tiên là quan trọng

Nếu số trong cột ID của các bộ chọn cạnh tranh giống nhau, thì cột tiếp theo, LỚP, sẽ được so sánh, như minh họa 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 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 thể hiện 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ột LỚP và ID trong các bộ chọn cạnh tranh giống nhau, thì cột LOẠI sẽ có liên quan. Cột TYPE là số loại phần tử và phần tử giả trong bộ chọn. Khi hai cột đầu tiên có cùng giá trị, bộ chọn có số lớn hơn trong cột LOẠI 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 sẽ phát huy tác dụng, trong đó kiểu được khai báo cuối cùng sẽ được ưu tiên

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

Lớp giả phù hợp-bất kỳ

: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 ghép nối CSS ở trên, trọng số đặc hiệu được cung cấp bởi 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 */
}

Cả ba lớp giả này đều chấp nhận danh sách bộ chọn phức tạp, danh sách bộ chọn được phân tách bằng dấu phẩy, làm 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 */
}
h1: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 đã bao gồm

:is(p, #fakeId) {
  /* 1-0-0 */
}
h1: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 */
}
h1: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 */
}
h1: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ảm độ đặc hiệu xuống mức tối thiểu, nhưng nếu bạn cần tăng độ đặc hiệu của một phần 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 lam, trừ khi bị ghi đè bởi một khai báo liên kết có 3 ID trở lên, giá trị màu khớp với một

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

Các kiểu nội tuyến được thêm vào một phần tử (e. g. ,

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 đè kiểu nội tuyến là sử dụng

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

Nhiều khung và thư viện JavaScript thêm 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ờ quan trọng để những người bảo trì mã hiểu lý do tại sao một mẫu chống CSS được sử dụng

Các khai báo CSS được đánh dấu là quan trọng sẽ ghi đè bất kỳ khai báo nào khác trong cùng một tầng 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à tầng tầng xung đột và một giá trị thuộc tính có 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 */
}

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 */
}

Lớp giả điều chỉnh độ đặc hiệu

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

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

Trong việc tạo CSS của bên thứ ba để các nhà phát triển không có quyền truy cập chỉnh sửa CSS của bạn sử dụng, cách tốt nhất là 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 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 */

Thay vì sử dụng

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

Bằng cách chỉ ra phần tài liệu bạn đang tạo kiểu trước thành phần bạn đang chọn, quy tắc sẽ trở nên cụ thể hơn. Tùy vào cách bạn thêm mà bạn có thể thêm ít, nhiều hay không cụ thể như hình 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 tính đặc hiệu của ID

Tính đặc hiệu dựa trên hình thức của 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!! */
}

Là một trường hợp đặc biệt để tăng tính đặc hiệu, bạn có thể sao chép trọng số từ các cột LỚP hoặc ID. Sao chép bộ chọn id, lớp, lớp giả hoặc thuộc tính trong bộ chọn hỗn hợp 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 cái này một cách tiết kiệm, nếu có. Nếu sử dụng sao chép bộ chọn, hãy luôn nhận xét 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 */
}

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

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

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

Khi hai bộ chọn từ các lớp khác nhau khớp với cùng một phần tử, nguồn gốc và mức độ quan trọng sẽ được ưu tiên;

[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 cả nội dung lồng nhau, sẽ là _______40_______07 bất kể đoạn văn đó có bao nhiêu tên lớp phù hợp với biểu định kiểu TW

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 khai báo

  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
• Cung cấp cho nó tính đặc hiệu tương tự và đặt nó sau phần khai báo, nó có nghĩa là ghi đè
• Giảm tính đặc hiệu của bộ chọn mà 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ờ

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 biểu định kiểu ngắn, riêng biệt chỉ chứa các khai báo quan trọng ghi đè cụ thể bất kỳ khai báo quan trọng nào mà bạn không thể xóa
2. Nhập biểu định kiểu này làm lần 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 biểu định kiểu khác. Điều này là để đảm bảo rằng các phầ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 khai báo biểu định kiểu của bạn, hãy tạo một lớp xếp tầng 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 khi bạn cần ghi đè một khai báo 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

Độ đặc hiệu của bộ chọn kiểu 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 không có lớp

Sự gần gũi của một phần tử với các phần tử khác được tham chiếu trong một bộ chọn nhất định không ảnh hưở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 phần tử

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

Các kiểu dành cho phần 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 được kế thừa, bất kể tính đặc hiệu của quy tắc được kế thừa. Đưa ra 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 */

Trong CSS sau, chúng tôi có ba bộ chọn nhắm mục tiêu các phần 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 tất cả các bộ chọn ở trên nhắm mục tiêu đến 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, cho dù có bao nhiêu phần tử và phần tử giả được bao gồm, ngay cả khi có 150, các thành phần TYPE 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, thì hai bộ chọn đầu tiên sẽ có cùng tính đặ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 như nhau, khai báo cuối cùng được tìm thấy trong CSS sẽ được áp dụng cho phần tử. Nếu cả hai bộ chọn khớp với cùng một

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

Có thể ghi đè Quan trọng trong CSS không?

Làm cách nào để ghi đè CSS nội tuyến mà không cần sử dụng quan trọng?