Khó hiểu quy tắc CSS ưu tiên

Question

Tôi có điều này (giản thể) đánh dấu:

<ul id="topnav"> 
    <li>one</li> 
    <li>two</li> 
    <li id="last-nav">last</li> 
</ul> 

và những quy tắc CSS:

#topnav li { 
    list-style-type: none; 
    float: left; 
} 

#last-nav { 
    float: right; 
} 

Trước sự ngạc nhiên của tôi, quy tắc thứ hai là bị bác bỏ bởi cái đầu tiên. Nếu tôi thay đổi công cụ chọn thành li#last-nav, công cụ sẽ hoạt động. Tại sao vậy?

(Tuyên bố từ chối trách nhiệm: Tôi chỉ kiểm tra điều này trong Firefox)

Answer 1

Các thác các công trình như thế này:

1. Nguyên tắc quan trọng hơn được áp dụng.
2. Nếu quan trọng không kém, quy tắc cụ thể hơn sẽ được áp dụng.
3. Nếu cụ thể như nhau, quy tắc sau sẽ áp dụng.

Ở đây, #topnav li có specificity của 101, và #last-nav có độ đặc hiệu là 100, vì vậy người đầu tiên chiến thắng. Bộ chọn của li#last-nav hoặc #topnav #last-nav sẽ cụ thể hơn.

Answer 2

Quy tắc cuối cùng có độ đặc hiệu thấp hơn. Hãy thử thay đổi để:

li#last-nav { } 

FYI: Bạn có thể sử dụng công cụ calc này đặc hiệu: Specificity Calculator

Answer 3

Sử dụng:

#topnav #last-nav { 
    float: right; 
} 

hoặc

#last-nav { 
    float: right !important; 
} 

Answer 4

Đọc trên CSS đặc hiệu:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
http://meyerweb.com/eric/css/link-specificity.html

Về cơ bản, công cụ chọn đầu tiên cụ thể hơn số thứ hai, để ưu tiên. Nó không phải về thứ tự từ trên xuống trong CSS. Thứ tự từ trên xuống chỉ áp dụng nếu cả hai công cụ chọn đều giống nhau.

Answer 5

Bạn có thể giải thích điều này với độ đặc hiệu.

nghĩ về nó như thế này:

Elements etc: 0, 0, 0, 1 
Classes: 0, 0, 1, 0 
IDs: 0, 1, 0, 0 
Inline: 1, 0, 0, 0 

#topnav li = 0, 1, 0, 1 
#last-nav = 0, 1, 0, 0 

Vì vậy #topnav li là cụ thể hơn và do đó lợi nhuận được ưu tiên.

Tất nhiên tầng và inhertence và thậm chí việc sử dụng! Important có thể mất các hiệu ứng khác trên CSS nhưng trong trường hợp này, #topnav li chỉ là cụ thể hơn

Answer 6

Tôi không chắc chắn, mặc dù tôi nghi ngờ, rằng quy tắc đầu tiên được ưu tiên vì nó đang được áp dụng cho một phần tử cụ thể (li, trong trường hợp này). Quy tắc thứ hai về mặt lý thuyết có thể áp dụng cho bất kỳ phần tử nào có ID của nav cuối cùng.

quy tắc

đặc hiệu có thể đến vào chơi: http://www.w3.org/TR/CSS2/cascade.html#specificity

Trình duyệt hiện tại có lẽ sẽ cho phép bạn nhận được ngay với:

#topnav li:last-child { 

float: right; }

... và đạt được kết quả tương tự với kết quả bạn muốn.

HTH,

G

Answer 7

Nó đã làm với phong cách đầu tiên của bạn có độ đặc hiệu hơn thứ hai của bạn. Hãy xem this site để biết thêm chi tiết. Để có được phong cách thứ hai của bạn hoạt động bình thường, hãy thử sử dụng:

#topnav #last-nav 

Answer 8

Rules Selector: Tính đặc hiệu

Style sheets cũng có thể ghi đè style sheets mâu thuẫn dựa trên mức độ đặc hiệu, nơi một phong cách cụ thể hơn sẽ luôn luôn thắng trong một ít cụ thể hơn. Nó chỉ đơn giản là một trò chơi đếm để tính toán độ đặc hiệu của một bộ chọn.

• Đếm số thuộc tính ID trong công cụ chọn.
• Đếm số thuộc tính CLASS trong bộ chọn.
• Đếm số lượng tên thẻ HTML trong công cụ chọn.

Cuối cùng, viết ba số theo thứ tự chính xác không có dấu cách hoặc dấu phẩy để có được số có ba chữ số. (Lưu ý, bạn có thể cần phải chuyển đổi các số thành một cơ sở lớn hơn để kết thúc bằng ba chữ số.) Danh sách cuối cùng của các số tương ứng với các bộ chọn sẽ dễ dàng xác định độ đặc hiệu với số cao hơn thắng trên số thấp hơn. Sau đây là một danh sách các bộ chọn được sắp xếp theo độ đặc hiệu:

#id1   {xxx} /* a=1 b=0 c=0 --> specificity = 100 */ 
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */ 
LI.red  {xxx} /* a=0 b=1 c=1 --> specificity = 011 */ 
LI   {xxx} /* a=0 b=0 c=1 --> specificity = 001 */ 

Trong ví dụ của bạn #topnav li là 101 và #last-nav chỉ 100, vì vậy 101 trận thắng.

Trích dẫn từ http://htmlhelp.com/reference/css/structure.html