Cách ghi đè trong css

Khi nhiều quy tắc CSS tham chiếu cùng một phần tử HTML, trình duyệt cần một quy tắc ngón tay cái để dự đoán hướng dẫn tạo kiểu nào sẽ được ưu tiên. Điều này được gọi là ghi đè CSS. Tùy thuộc vào loại bộ chọn nào được sử dụng để tạo kiểu cho một phần tử, có một số quy tắc xác định kiểu nào ghi đè kiểu khác

Hãy lấy một ví dụ nhỏ để hiểu làm thế nào điều này được thực hiện

Mã HTML và CSS mẫu hiển thị văn bản Hello World có màu đỏ. Phần tử ghi đè lớp

Trong mẫu mã ở trên, phần tử đoạn chỉ định kiểu dáng trong CSS bên ngoài. Điều này áp dụng cho bất kỳ phần tử đoạn văn nào không chỉ là “Xin chào thế giới. ” đoạn văn. Bây giờ, tôi muốn hiển thị đoạn văn bản hello world của mình khác với tất cả các đoạn khác. Đối với điều này, tôi đang thêm một lớp màu xanh lam như hình bên dưới

Mã HTML và CSS mẫu ghi đè kiểu phần tử p bằng một lớp cụ thể

Bây giờ, màu văn bản thay đổi từ Đỏ sang xanh xác nhận rằng một lớp có tính đặc hiệu cao hơn so với thẻ phần tử

Lớp ghi đè lớp

Kiến thức phổ biến là kiểu lớp ghi đè kiểu phần tử chung. Nhưng, bạn có biết làm thế nào một phong cách lớp ghi đè lên một phong cách khác. Mẹo nhỏ này sẽ hữu ích khi bạn có nhiều lớp cạnh tranh với nhau để chỉ định kiểu dáng cho một phần tử cụ thể

Mã HTML và CSS mẫu trình bày cách một kiểu lớp có thể ghi đè kiểu lớp khác

Với các thay đổi trên, màu chữ hello world chuyển từ xanh sang cam. Ghi chú. Bạn có thể chỉ định tên lớp theo bất kỳ thứ tự nào trong thẻ p nhưng quy tắc ghi đè CSS đề xuất rằng thứ tự ưu tiên được cung cấp cho lớp được xác định cuối cùng trong CSS

Id ghi đè lớp

Bộ chọn lớp có thể sử dụng lại. Nói cách khác, nhiều phần tử có thể có cùng tên lớp và do đó, kiểu dáng giống nhau. Ngược lại, HTML không cho phép bạn sử dụng lại ID. Nếu phần tử bạn đang tạo kiểu có cả thuộc tính lớp và id, trong trường hợp đó, kiểu ID sẽ được ưu tiên hơn lớp. Bởi vì các phần tử khác không thể tham chiếu đến cùng một ID, kiểu bộ chọn ID sẽ cụ thể hơn so với một lớp

Mã HTML và CSS mẫu sử dụng bộ chọn ID để ghi đè kiểu bộ chọn lớp

Như mong đợi, màu văn bản xin chào thế giới thay đổi từ màu cam sang màu tím

Id ghi đè kiểu nội tuyến

CSS có thể được thêm vào HTML dưới dạng thẻ nội tuyến và khi hoàn tất, kiểu nội tuyến được chỉ định sẽ được ưu tiên hơn các hướng dẫn tạo kiểu khác đã lưu ý ở trên. Bây giờ, hãy viết lại ví dụ hiện tại của chúng ta bằng cách thêm một kiểu nội tuyến vào thành phần đoạn văn trong HTML

Mã HTML mẫu chỉ định kiểu nội tuyến sẽ ghi đè kiểu bộ chọn id, lớp và phần tử

Với việc bổ sung kiểu nội tuyến, màu văn bản xin chào thế giới thay đổi từ màu tím sang màu xanh lá cây

CSS quan trọng ghi đè tất cả

Quan trọng là một thuộc tính quan trọng có thể được thêm vào kiểu dáng CSS. Như tên ngụ ý, nó cho biết kiểu dáng mà nó đi kèm là quan trọng và có thể ghi đè kiểu dáng nội tuyến. . quan trọng được thêm vào cuối dòng hướng dẫn tạo kiểu như được thực hiện với ví dụ của chúng tôi bên dưới

Một mã CSS mẫu với. thẻ quan trọng được thêm vào kiểu bộ chọn thành phần đoạn văn

Văn bản xin chào thế giới hiện được hiển thị bằng màu đỏ vì. quan trọng được thêm vào kiểu thẻ phần tử p sẽ ghi đè tất cả các loại bộ chọn khác

Tính đặc hiệu là thuật toán được các trình duyệt sử dụng để xác định thuật toán phù hợp nhất với một phần tử, từ đó xác định giá trị thuộc tính để áp dụng cho phần tử. Thuật toán tính đặc hiệu tính toán trọng số của a để xác định quy tắc nào từ các khai báo CSS cạnh tranh sẽ được áp dụng cho một phần tử

Ghi chú. Các trình duyệt xem xét tính đặc hiệu sau khi xác định nguồn gốc và tầm quan trọng của tầng. Nói cách khác, đối với các khai báo thuộc tính cạnh tranh, tính đặc hiệu có liên quan và chỉ được so sánh giữa các bộ chọn từ nguồn gốc một tầng và lớp được ưu tiên cho thuộc tính. Thứ tự xuất hiện trở nên phù hợp khi các đặc điểm của bộ chọn của các khai báo cạnh tranh trong lớp xếp tầng có mức độ ưu tiên bằng nhau

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 phù hợ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

cột ID

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 */
}
6. Đối với mỗi ID trong bộ chọn phù hợp, hãy thêm 1-0-0 vào giá trị trọng số

cột LỚP

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 */
}
7, bộ chọn thuộc tính như
#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}
8 và
#myElement {
  color: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}
9, và các lớp giả, chẳng hạn như
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
0,
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
1 và
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
2. Đối với mỗi lớp, bộ chọn thuộc tính hoặc lớp giả trong bộ chọn phù hợp, hãy thêm 0-1-0 vào giá trị trọng số

cột LOẠI

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!! */
}
3,
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
4 và
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
5 và các phần tử giả như
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
6,
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
7 và tất cả các bộ chọn khác có ký hiệu dấu hai chấm. Đối với mỗi loại hoặc phần tử giả trong bộ chọn phù hợp, hãy thêm 0-0-1 vào giá trị trọng số

Không có giá trị

Bộ chọn phổ quát (

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
8) và lớp giả
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
9 và các tham số của nó không được tính khi tính trọng số nên giá trị của chúng là 0-0-0, nhưng chúng khớp với các phần tử. Các bộ chọn này không ảnh hưởng đến giá trị trọng lượng đặc hiệu

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 */
}
0,
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
1,
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
2, " ", và
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
3, có thể làm cho bộ chọn cụ thể hơn trong những gì được chọn nhưng chúng không thêm bất kỳ giá trị nào vào trọng số cụ thể

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 */
}
4, bản thân nó không có trọng số. 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 */
}
5 hoặc
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
6 cũng vậy. Tuy nhiên, các tham số trong các bộ chọn này không. Giá trị của cả hai đều đến từ tham số trong danh sách tham số có độ đặc hiệu cao nhất. Những điều được thảo luận dưới đây

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 */
}
0 trong danh sách bộ chọn ở trên, với trọng số cụ thể là
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
1, áp dụng khai báo
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
2 cho tất cả các kiểu nhập mật khẩu

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 */
}
3, với trọng số cụ thể là
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
4; . Nếu đầu vào mật khẩu có tiêu điểm, nó sẽ khớp với
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
3 và trọng số cụ thể cho khai báo kiểu
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
2 sẽ là
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
4. Khi mật khẩu đó không có tiêu điểm, trọng số cụ thể vẫn ở mức
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
1

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 */
}
1 là
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 */
}
2, dựa trên một ID, hai lớp giả và một loại phần tử

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 */
}
1, thì trọng số cụ thể sẽ là
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 */
}
2, cho dù nó có tiêu điểm hay không. Tại sao trọng số đặc hiệu là
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 */
}
2 thay vì
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
4 hoặc
input.myClass {
  color: yellow; /* 0-1-1 */
}
:root input {
  color: green; /* 0-1-1 WINS because it comes later */
}
1 trong trường hợp này? . Trọng số được xác định bằng cách so sánh các giá trị trong ba cột, từ trái sang phải

[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 */
}
5, lớp giả quan hệ
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
6 và 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 */
}
4 không được coi là lớp giả trong phép tính trọng số đặc hiệu. Bản thân họ không thêm bất kỳ trọng số nào vào phương trình đặc hiệu. Tuy nhiên, các tham số bộ chọn được truyền vào dấu ngoặc đơn lớp giả là một phần của thuật toán đặc hiệu;

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ách 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 */
}
5,
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
6 và
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
4 là giá trị của tham số bộ chọn, không phải của lớp giả

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 */
}
7 trong 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 */
}
7 này thê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 */
}
9 vào trọng số cụ thể của mỗi đoạn

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 */
}
0 bao gồm hoặc nếu liên kết có một khai báo màu. Nếu bạn sử dụng một kỹ thuật như vậy, hãy thêm một bình luận để giải thích lý do tại sao cần hack

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 */
}
2) luôn ghi đè bất kỳ kiểu thông thường nào trong biểu định kiểu của tác giả và do đó, có thể được coi là có tính đặc hiệu cao nhất. Hãy coi các kiểu nội tuyến có trọng số cụ thể là
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
3

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 */
}
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 */
}
1 với bộ chọn được nhắm mục tiêu cụ thể, chẳng hạn như bộ chọn thuộc tính sử dụng kiểu nội tuyến, là một cách để ghi đè các kiểu nội tuyến này

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

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

Đả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 */
}
1 không liên quan gì đến tính đặc hiệu, nhưng nó tương tác trực tiếp với tính đặc hiệu và tầng. Nó đảo ngược thứ tự xếp tầng của các biểu định kiểu

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 */
}
1 được đặt, thì khai báo quan trọng sẽ được áp dụng bất kể tính đặc hiệu. Khi các khai báo xung đột từ cùng một nguồn gốc và lớp xếp tầng với cờ
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1 được áp dụng cho cùng một thành phần, thì khai báo có tính đặc hiệu cao hơn sẽ được áp dụng

Sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1 để ghi đè tính đặc hiệu được coi là một cách làm không tốt và nên tránh cho mục đích này. Hiểu và sử dụng hiệu quả tính đặc hiệu và tầng có thể loại bỏ mọi nhu cầu về cờ
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1

Thay vì sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1 để ghi đè CSS nước ngoài (từ các thư viện bên ngoài, như Bootstrap hoặc normalize. css), nhập trực tiếp tập lệnh của bên thứ ba vào các lớp theo tầng. Nếu bạn phải sử dụng
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1 trong CSS của mình, hãy nhận xét cách sử dụng của bạn để những người bảo trì mã trong tương lai biết lý do tại sao phần khai báo được đánh dấu là quan trọng và biết để không ghi đè lên nó. Nhưng chắc chắn, không sử dụng
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1 khi viết các plugin hoặc khung mà các nhà phát triển khác sẽ cần kết hợp mà không thể kiểm soát

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!! */
}
9 luôn có độ đặc hiệu được thay thế bằng 0,
<p style="color: purple">p>
7. Nó cho phép tạo các bộ chọn CSS rất cụ thể trong phần tử nào được nhắm mục tiêu mà không làm tăng tính đặc hiệu

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

Thay vì sử dụng

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1, hãy cân nhắc sử dụng các lớp xếp tầng và sử dụng độ đặc hiệu trọng lượng thấp trong toàn bộ CSS của bạn để các kiểu dễ dàng bị ghi đè bằng các quy tắc cụ thể hơn một chút. Sử dụng HTML ngữ nghĩa giúp cung cấp các điểm neo để áp dụng kiểu dáng

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

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

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>
9 của một phần tử làm bộ chọn thuộc tính thay vì bộ chọn id là một cách hay để làm cho một phần tử cụ thể hơn mà không cần thêm quá nhiều tính cụ thể. Trong ví dụ trước, bộ chọn
[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */
00 được tính là bộ chọn thuộc tính nhằm mục đích xác định tính đặc hiệu của bộ chọn, mặc dù nó chọn một ID

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

<p style="color: purple">p>
9 hoặc bất kỳ phần nào của bộ chọn làm tham số trong lớp giả điều chỉnh tính đặc hiệu của
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
9 nếu bạn cần làm cho bộ chọn cụ thể hơn nhưng hoàn toàn không muốn thêm bất kỳ tính đặc hiệu nào

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

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 */
}
5 và
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
4 (và cả
:root input {
  color: green; /* 0-1-1 - WINS because CLASS column is greater */
}
html body main input {
  color: yellow; /* 0-0-4 */
}
6), bạn có thể tăng tính cụ thể ngay cả khi bạn không thể thêm ____62_______9 vào phần tử gốc

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

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

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 */
}
1. Các giải thích ở trên về tính đặc hiệu sẽ hữu ích trong việc tránh sử dụng cờ và loại bỏ nó hoàn toàn khi gặp phải

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

a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1, bạn có thể thực hiện một trong các cách sau

  • 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 */
}
1 khỏi biểu định kiểu tác giả, giải pháp duy nhất để ghi đè các kiểu quan trọng là sử dụng
a:not(#fakeId#fakeId#fakeID) {
  color: blue; /* 3-0-1 */
}
1. Tạo một lớp xếp tầng ghi đè khai báo quan trọng là một giải pháp tuyệt vời. Hai cách để làm điều này bao gồm

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

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

Các phần tử

[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */
16 sẽ có màu tím vì khi khai báo có cùng độ đặc hiệu, bộ chọn được khai báo cuối cùng sẽ được ưu tiên

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

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

#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
4 sẽ có màu tím vì bộ chọn
#myElement {
  color: yellow; /* 1-0-0 */
}
#myApp [id="myElement"] {
  color: green; /* 1-1-0  - WINS!! */
}
4 nhắm mục tiêu cụ thể vào phần tử, trong khi màu xanh lục được kế thừa từ các khai báo
[type="password"]             /* 0-1-0 */
input:focus                   /* 0-1-1 */
:root #myApp input:required   /* 1-2-1 */
19

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 */
20 để đặt màu. Đối với một đầu vào nhất định, trọng số cụ thể của khai báo màu được ưu tiên là bộ chọn phù hợp với trọng số lớn nhất

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

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

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 */
20, màu sẽ có màu xanh lam

Ghi đè hoạt động như thế nào trong CSS?

CSS cho phép bạn áp dụng các kiểu cho trang web. Quan trọng hơn, CSS cho phép bạn làm điều này độc lập với HTML tạo nên mỗi trang web. ghi đè. Ghi đè trong CSS có nghĩa là bạn đang cung cấp bất kỳ thuộc tính kiểu nào cho phần tử mà bạn đã cung cấp kiểu .

Làm cách nào để ghi đè kiểu HTML bằng CSS?

Cách duy nhất để ghi đè kiểu nội tuyến là sử dụng. từ khóa quan trọng bên cạnh quy tắc CSS . Sau đây là một ví dụ về nó.

Làm cách nào để ghi đè CSS id bằng CSS lớp?

Ví dụ về ghi đè kiểu CSS bằng bộ chọn Lớp. Ở đây, bộ chọn Lớp ghi đè bộ chọn ID vì nó là bộ chọn được sử dụng lần cuối. Bộ chọn ID chỉ được ưu tiên hơn bộ chọn Lớp nếu cả hai đều được sử dụng trong cùng một phần tử .

Làm cách nào để ghi đè kiểu nội dung trong CSS?

Người dùng phải đặt kiểu nội tuyến bên trong thẻ HTML . Mặc dù họ phải đặt các biểu định kiểu nhúng bên trong thẻ HTML