Trình duyệt giải quyết các lớp xung đột như thế nào?

Question

Tôi biết nó có thể xác định nhiều lớp trên một phần tử trong HTML:

<div class='one two'>Text</div> 

Nó có vẻ như các lớp học có thể truy cập từ javascript như là một chuỗi duy nhất.

Điều gì sẽ xảy ra khi các lớp được chỉ định với các thuộc tính xung đột? Ví dụ:

div.one { 
    background-color: red; 
    color: blue; 
} 
div.two { 
    background-color: green; 
} 

Kết quả có phụ thuộc vào thứ tự các lớp được chỉ định không? Ví dụ, tôi có thể mong đợi một cách hợp lý div ở trên xuất hiện với văn bản màu xanh và nền màu xanh lục, vì lớp two trở thành thứ hai được đánh giá, ghi đè thuộc tính background-color?

Answer 1

Tìm hiểu về đặc hiệu:

• Simple explanation
• More in depth explanation

Câu trả lời ngắn gọn: nếu hai công cụ chọn có cùng đặc trưng, ​​giá trị cuối cùng được công bố sẽ thắng.

Answer 2

http://jsfiddle.net/mrtsherman/2NpXS/

Tùy thuộc vào thứ tự biểu định kiểu. Các khai báo kiểu sau này được ưu tiên. Bạn có thể đảo ngược hai dòng css để xem.

Answer 3

Nếu bộ chọn có same level of precedence (như ở đây), tùy theo điều kiện nào được chỉ định sau sẽ được ưu tiên. Trong trường hợp này, nền phải có màu xanh lá cây, nhưng phông chữ có màu xanh dương.

Từ CSS spec:

Cuối cùng, sắp xếp theo thứ tự quy định: nếu hai tờ khai có cùng một trọng lượng, nguồn gốc và độ đặc hiệu, thắng quy định sau. Các tờ khai trong tờ định kiểu được nhập được coi là trước bất kỳ tờ khai nào trong bản định kiểu.

Answer 4

Những gì bạn đang sử dụng để tạo kiểu được gọi là "bảng định kiểu xếp tầng". Phần tầng có nghĩa là nó giống như một thác nước và các quy tắc trong tương lai được xây dựng trên (hoặc ghi đè) những quy tắc trước đó. Do đó quy tắc thứ hai sẽ ghi đè thuộc tính màu nền nhưng nó vẫn sẽ giữ lại màu phông chữ.

(cẩn thận với ưu tiên mặc dù. Một quy tắc mà đi tắt của một id có ưu tiên cao hơn hơn một mà đi tắt của một lớp không phân biệt nơi chúng được đặt.)

Answer 5

CSS có một trật tự rất tốt định nghĩa của ưu tiên.

Trong các trường hợp như thế này, khi tất cả các trường hợp khác giống nhau và mức độ ưu tiên bằng nhau, trình duyệt sẽ chọn kiểu được xác định cuối cùng trong bảng định kiểu.

Trong ví dụ bạn đã đưa ra, điều này có nghĩa là kiểu div.two sẽ ghi đè div.one, trong đó cùng một thuộc tính được xác định trong cả hai.

Nhân tiện, đây cũng là tính năng tương tự cho phép bạn xác định nhiều kiểu với cùng một thuộc tính trong cùng một bộ chọn, để hỗ trợ các tính năng trình duyệt khác nhau. Ví dụ, một số trình duyệt có thể không hỗ trợ màu rgba, vì vậy bạn có thể làm như sau:

.myclass { 
    background: rgb(200, 54, 54); 
    background: rgba(200, 54, 54, 0.5); 
} 

Tất cả các trình duyệt sẽ chọn background khai cuối cùng mà họ hỗ trợ, vì vậy các trình duyệt có hỗ trợ rgba sẽ chọn cái thứ hai, trong khi các trình duyệt mà không, sẽ làm gì với cái đầu tiên.Đây cũng là lý do tại sao, khi bạn sử dụng các kiểu tiền tố của nhà cung cấp, bạn cũng nên chỉ định phiên bản không có tiền tố sau (các) phiên bản tiền tố, để khi trình duyệt của nhà cung cấp đó bắt đầu hỗ trợ phiên bản không có tiền tố của phong cách, bạn có thể chắc chắn nó sẽ sử dụng nó thay vì phiên bản tiền tố (có thể không hỗ trợ tất cả các tính năng của phiên bản cuối cùng).

Answer 6

Kết quả phụ thuộc vào thứ tự các lớp học được quy định tại

Dưới đây là một tốt write-up vào thứ tự các quy tắc CSS được thực hiện:. http://htmlhelp.com/reference/css/structure.html