Thứ tự ưu tiên trong css là gì?

Độ đặc hiệu được tính như thế nào?

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ố bộ chọn của từng loại trọng số 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ử

Loại trọng lượng bộ chọn

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

Bộ kết hợ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: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

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

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ụ

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

Bộ chọn

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

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

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

Tính đặc hiệu cho đầu vào bắt buộc được lồng trong một phần tử có thuộc tí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 */
}

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

#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: 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!! */
}

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

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

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

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

Các trường hợp ngoại lệ #myElement { color: green; /* 1-0-0 - WINS!! */ } .bodyClass .sectionClass .parentClass [id="myElement"] { color: yellow; /* 0-4-0 */ } 45, #myElement { color: green; /* 1-0-0 - WINS!! */ } .bodyClass .sectionClass .parentClass [id="myElement"] { color: yellow; /* 0-4-0 */ } 44 và #myElement { color: green; /* 1-0-0 - WINS!! */ } .bodyClass .sectionClass .parentClass [id="myElement"] { color: yellow; /* 0-4-0 */ } 46

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

#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: green; /* 1-0-0  - WINS!! */
}
.bodyClass .sectionClass .parentClass [id="myElement"] {
  color: yellow; /* 0-4-0 */
}

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

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

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

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

Trong khối mã CSS ở trên, chúng tôi đã bao gồm

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

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

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

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

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

kiểu nội tuyến

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

#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ách duy nhất để ghi đè kiểu nội tuyến là sử dụng

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

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

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

Đả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

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

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,

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

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ờ

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

Sử dụng

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

Thay vì sử dụng

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

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

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

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

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

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

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

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

Mẹo để xử lý đau đầu cụ thể

Thay vì sử dụng

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

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

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

#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ấ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

#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ạn cũng có thể bao gồm

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

Tăng tính đặc hiệu bằng cách sao chép bộ chọn

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 các 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

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

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

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

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

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 tầng 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;

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

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à

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

Tránh và ghi đè #myElement { color: yellow; /* 1-0-0 */ } #myApp [id="myElement"] { color: green; /* 1-1-0 - WINS!! */ } 21

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

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

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

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

• Tăng tính đặc hiệu của bộ chọn của khai báo

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

  21 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ờ

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

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ể mọi khai báo quan trọng 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

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

   314, bao gồm cả câu lệnh

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

   315, 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

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

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

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

   39

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ự thiếu hiểu biết về sự gần gũi của cây cối

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ử

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

Các yếu tố được nhắm mục tiêu trực tiếp so với. phong cách kế thừa

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

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

ví dụ

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

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

#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ù bao gồm bao nhiêu phần tử và phần tử giả, 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

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

Kiểu CSS nào có mức độ ưu tiên cao nhất?

Thứ tự chính xác của tính đặc hiệu CSS là gì?