Sự khác biệt giữa quy tắc CSS `.class1.class2` và` .class1 .class2` là gì?

Tôi có một bảng với một số hàng:Sự khác biệt giữa quy tắc CSS `.class1.class2` và` .class1 .class2` là gì?

<table> 
    <tr class="even"><td>tr0</td></tr> 
    <tr><td>tr1</td></tr> 
    <tr class="even"><td>tr2</td></tr> 
</table>

Tôi có một quy tắc CSS (rule1) cho chẵn:

.even{ 
    background-color: blue; 
}

tôi có quy tắc khác (rule2) cho ghi đè các bgcolor của bất kỳ hàng :

.override, .override.even{ 
    background-color: green; 
}

điều lạ là trong IE9 tất cả even hàng (không có lớp override) là màu xanh lá cây!
công cụ phát triển cho thấy điều này cho even hàng:

enter image description here

Trong hai điều kiện IE thực hiện công việc một cách chính xác:

Nếu tôi viết lại rule2 như thế này:

.override, .override .even{ ... }

Nếu tôi chuyển rule2 ở trên quy tắc1:

.override, .override.even{ ... } 
.even { ... }

Câu hỏi là sự khác biệt giữa .override.even và .override .even là gì?

EDIT:

Cảm ơn bạn đã trả lời. Một câu hỏi khác mà tôi quên hỏi là tại sao IE cho thấy các hàng even màu xanh lá cây?

Nguồn

2011-10-21 Pedram Behroozi

.override .even = Chọn bất kỳ phần tử nào có lớp "thậm chí" là phần tử của bất kỳ phần tử nào có lớp "ghi đè" – Jawad

.override.even = Chọn bất kỳ phần tử nào có lớp "ghi đè "hoặc/và" thậm chí " – Jawad

Bạn cần phải có một số mã xung đột ở đâu đó. Khi tôi kiểm tra nó, các hàng vẫn còn màu xanh: http://jsfiddle.net/Guffa/e3w4q/ – Guffa

Khoảng cách giữa các trình chỉ định lớp có nghĩa là tăng dần -> mối quan hệ hậu duệ.

Nguyên tắc:

.test .heading { font-weight: bold; }

Sẽ áp dụng đối với các yếu tố <p> đây:

<span class="test"><p class="heading">Something</p></span>

Việc thiếu không gian có nghĩa là yếu tố phải có cả hai lớp cho các quy tắc để áp dụng.

Nguyên tắc:

.heading.major { color: blue; }

Sẽ áp dụng đối với các <p> yếu tố ở đây:

<p class="heading major">Major heading</p>

Nguồn

2011-10-21 19:39:27 Andre

Cảm ơn. Nhưng tại sao trong IE tất cả các hàng 'even' đều có màu xanh lá cây thay vì màu xanh? –

khoảng cách không có nghĩa là cha mẹ -> mối quan hệ con. Nó có nghĩa là hậu duệ -> mối quan hệ bị từ chối. Một phụ huynh là cần thiết một hậu duệ nhưng một ancednat không phải là necessirly một phụ huynh. Một đứa trẻ cần thiết là một người bị đơn nhưng một người bị kiện cũng không phải là một đứa trẻ cần thiết. – Jawad

@Jawad: Rất tốt, được lưu ý và chỉnh sửa hợp lệ. – Andre

.override .even được hiểu như là "một số phần tử với một lớp 'đè', với yếu tố khác với một lớp .even Về cơ bản, nó giống như ul li nhưng áp dụng cho các lớp CSS.

override.even được hiểu là "một số phần tử duy nhất có BOTH ghi đè và thậm chí cả các lớp".

Nguồn

2011-10-21 19:42:54

Cả hai câu trả lời đều đúng, nhưng chúng không giải thích, tại sao IE hiển thị cả hai hàng màu xanh lục.

Đó là vì IE có chế độ "chuẩn" và "quirks".Để làm cho nhiều bộ chọn lớp hoạt động, bạn cần sử dụng DOCTYPE thích hợp ở đầu tệp.

Bạn đang ở chế độ "quirks" ngay bây giờ và IE không hỗ trợ nhiều bộ chọn, nó chỉ thấy lớp mới nhất. Vì vậy, nó thấy điều này và hàng là màu xanh lá cây:

.even { 
    background-color: blue; 
} 
.override, .even { 
    background-color: green; 
}

Đặt

<!DOCTYPE html>

(hoặc DOCTYPE khác) vào đầu của tập tin và cả hai hàng sẽ được màu xanh như mong đợi.

Nguồn

2011-10-21 19:53:24 Petr

Làm thế nào để bạn biết anh ta đang ở chế độ quirks? – Jawad

Bởi vì anh ta có hai hàng màu xanh lá cây và nhiều lớp chọn không làm việc cho anh ta. Hai hàng này phải có màu xanh dương vì chúng nằm trong các trình duyệt khác. – Petr

+1 Điều này rất có thể là lý do. Chạy fiddle mà tôi liên kết trong các chú thích trong chế độ quirks ám các dòng với nền màu xanh lá cây. – Guffa

Xem W3C [CSS] Selector (Level 3) "Recommendation":

.override .even là haisimple selectors ngăn cách bởi một không gian (đó là descendant combinator, CSS là khoảng trắng-sensitive):

Đôi khi, tác giả có thể muốn selectors để mô tả một phần tử là hậu duệ của phần tử khác trong cây tài liệu (ví dụ: "phần tử EM được chứa trong phần tử H1"). Các combinator hậu duệ thể hiện mối quan hệ như vậy. Bộ kết hợp hậu duệ là khoảng trắng phân tách hai chuỗi các bộ chọn đơn giản. Một bộ chọn có dạng "AB" đại diện cho một yếu tố B đó là một hậu duệ độc đoán của một số yếu tố tổ tiên A.

chọn này sẽ phù hợp các yếu tố có lớp evenkhi và chỉ khi có tồn tại một tổ tiên - không nhất thiết phải là cha mẹ! - yếu tố với lớp override. (Không giống như các nhân vật trong một số bộ phim, một yếu tố là không bao giờ nó tổ tiên riêng ;-)

.override.even là một simple selector sequence:

Một chuỗi các selectors đơn giản là một chuỗi các selectors đơn giản mà không được tách bởi một tổ hợp. Nó luôn bắt đầu bằng bộ chọn loại hoặc bộ chọn phổ quát. Không có bộ chọn loại khác hoặc bộ chọn chung nào được phép trong chuỗi.

Một chuỗi selector đơn giản được đánh giá là conjunction của selectors đơn giản cá nhân áp dụng đối với cùng một nguyên tố: đó là, nó sẽ chỉ phù hợp với các yếu tố với cả các overridevàeven lớp áp dụng.

Mã hóa vui vẻ.

Nguồn

2011-10-21 19:58:25

Sự khác biệt giữa quy tắc CSS `.class1.class2` và` .class1 .class2` là gì?

Trả lời

Các vấn đề liên quan