Ưu tiên giữa các bộ chọn CSS

Question

CSS Câu hỏi: Nếu hai bộ chọn khác nhau áp dụng cho một phần tử, thì ai sẽ thắng?

Tôi biết điều này không nên xảy ra, nhưng tôi muốn tinh chỉnh ứng dụng cũ và CSS đang nhận được ở giữa.

Answer 1

gory details trong thông số kỹ thuật thực sự có thể đọc được một cách hợp lý. Tóm lại:

1. !important quy tắc và nội quy style quy tắc giành chiến thắng nhiều nhất.

2. Nếu không, thường thì chiến thắng cụ thể hơn. #id là một bộ chọn cụ thể hơn .classname là một bộ chọn cụ thể hơn so với tagname.

3. Quy tắc cụ thể như nhau ở đâu, tuyên bố thắng cuối cùng.

Không có lý do cụ thể nào khiến ‘điều này không xảy ra’. Nó là bình thường để chỉ định một quy tắc bàn chải rộng và sau đó thêm một quy tắc cụ thể hơn để nhắm mục tiêu một trường hợp; nhiều quy tắc cùng thuộc tính trên một phần tử không phải là bất thường hoặc không mong muốn.

Answer 2

Xem phần specificity order của đặc điểm kỹ thuật (cùng với phần còn lại của chương đó! Các quy tắc quan trọng và thứ tự các quy tắc xuất hiện trong biểu định kiểu cũng có tác động).

Answer 3

Điều đó sẽ xảy ra! Đó là lý do tại sao nó được gọi là phong cách CASCADING tờ. Bạn có thể tìm thấy ví dụ về các ưu tiên here

Answer 4

Ưu tiên giữa các bộ chọn được kiểm soát theo mức độ cụ thể của chúng. Các bộ chọn cụ thể hơn giành được ít chi tiết hơn.

Nếu hai bộ chọn giống nhau, phiên bản sau sẽ thắng trên bộ chọn đầu tiên.

Có ba mức độ đặc trưng, ​​id, lớp và phần tử. Vì vậy, #elem giành được trên .elem làm id cụ thể hơn. .elem .cont thắng hơn .elem vì nó có nhiều bộ chọn hơn ở cùng cấp.

Đọc thêm trong phần "Điều gì xảy ra khi xung đột xảy ra?" tại số Selectutorial.

Answer 5

Đặt hàng trong tệp CSS chỉ có vấn đề nếu các bộ chọn có cùng độ đặc hiệu.

Để biết thêm về selector đặc hiệu: Andy Clarke penned Specificity Wars which is the best overview of how they work.

Answer 6

CSS là viết tắt của Cascading Style Sheets. Điều này có nghĩa là các quy tắc áp dụng cho các phần tử theo cách xếp tầng. Hoàn toàn bình thường khi các bộ chọn khác nhau áp dụng cho một phần tử. Nghĩ, ví dụ, như sau:

<div class="wrapper"> 
    <div id="foo" class="bar" style="some rules">Test</div> 
</div> 

Các quy tắc sau đây sẽ ảnh hưởng đến các yếu tố "foo":

.wrapper { 
    //some other rules 
} 

#foo { 
    // some more rules 
} 

.bar { 
    // some more rules 
} 

Quy tắc ưu tiên có thể được tìm thấy here.

Tôi luôn khuyên bạn nên sử dụng plugin Firefox "firebug". Nó sẽ cho bạn thấy chính xác các thuộc tính nào được đánh giá cho một phần tử cụ thể và tại sao, nhấn mạnh các ghi đè trong quá trình xếp tầng.

Answer 7

bạn phải tìm # no id = A, # không có các class = B và # no của thẻ = c trong bộ chọn

ABC với chiến thắng giá trị cao hơn.

.wrapper .title p { 
    //some other rules 
} 

A=0 B=2 C=1 =021 

\#foo { 
    // some more rules 
} 

A=1 = 100 

.bar .head div li{ 
    // some more rules 
} 


A=0 B=2 C=2 =022 

100> 022> 021

nên #foo thắng

Answer 8

1. ! Important
2. inline style
3. #ID
4. lớp
5. thẻ

Answer 9

"#id" mạnh hơn tên ".class" và ".class" mạnh hơn tên "thẻ". Nhưng nếu chúng ta áp dụng "quan trọng" hơn ưu tiên của nó thì phần lớn là chúng.

• ! Important
• kiểu inline
• id
• lớp
• thẻ