Quy tắc CSS cụ thể hơn không hoạt động

Question

Trong mã sau, tôi đã xác định quy tắc cụ thể hơn cho h1 là #inner h1 và quy tắc ít cụ thể hơn như #container h1 cũng được xác định. Nhưng nếu #container h1 được đặt sau #inner h1 thì nó có hiệu lực và #inner h1 bị bỏ qua trong khi nó không nên vì nó cụ thể hơn.

Hãy giúp tôi hiểu vấn đề.

CSS:

#inner h1 { font-size:25px; } 
#container h1 { font-size:15px; } 

HTML:

<div id="container"> 
    <div id="inner"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

Answer 1

Có thể ý tưởng về tính đặc hiệu của bạn hơi lệch. Tính đặc hiệu phải là một ý tưởng không có ngữ cảnh: vì CSS có thể được tải độc lập với HTML, bạn không cần một tài liệu HTML để đoán quy tắc nào cụ thể hơn. Hãy xem xét ví dụ này khác hợp lệ:

<div id="inner"> 
    <div id="container"> 
    <h1>Hello World!</h1> 
    </div> 
</div> 

Với đoạn mã này, bạn sẽ phải đi ngược lại dự đoán ban đầu của bạn mà inner nên cụ thể hơn. Điều này có nghĩa là ngữ cảnh yêu cầu phiên dịch của bạn (mà CSS không có).

Vấn đề là, cả hai quy tắc đều được xác định bằng nhau (h1 hậu duệ của một phần tử được xác định bởi id) và bộ chọn không ưu tiên cao hơn cho con cháu gần hơn.

Trong trường hợp áp dụng hai quy tắc áp dụng cụ thể bằng nhau, người chiến thắng là quy tắc cuối cùng được khai báo trong CSS.

Answer 2

đây không phải là một vấn đề ở tất cả :) CSS phân tích các lớp học cái khác và sự cai trị cuối cùng sẽ ghi đè trước, tất nhiên nếu trước đó là không cụ thể hơn hoặc không bao gồm các câu lệnh quan trọng trong đó, bạn có thể đặt kích thước phông chữ: 25px! trong trường hợp đầu tiên để nó ghi đè quy tắc cuối cùng, nếu không chỉ thay đổi các địa điểm của các lớp

Answer 3

Cả hai đều có cùng đặc tính và như bạn lưu ý, thứ tự chúng xuất hiện trong bảng định kiểu là yếu tố quyết định áp dụng quy tắc kiểu nào .

Có nhiều cách khác nhau để bạn có thể cấu trúc các quy tắc để đạt được độ đặc hiệu cao hơn nhưng nói chung tôi sẽ tránh xa công cụ sửa đổi !important.

Để biết thêm thông tin, hãy xem 6.4.3 Calculating a selector's specificity trong thông số CSS của W3.