Bộ chọn CSS con (>) không hoạt động với IE

Question

CSS sau hoạt động tốt dưới firefox nhưng không hoạt động trong trình duyệt IE, Tại sao?
Ngoài ra, làm cách nào để tôi chỉ tạo các phần tử, trực tiếp trong phần tử gốc, bị ảnh hưởng bởi CSS?

CSS:

.box{font:24px;} 
.box>div{font:18px} 
.box>div>div{font:12px;} 

HTML:

<div class="box"> 
    level1 
    <div> 
     level2 
     <div> level3</div> 
     <div> level3</div> 
    </div> 
    <div> 
     level2 
     <div> level3</div> 
     <div> level3</div> 
    </div> 
</div> 

Answer 1

Internet Explorer hỗ trợ chọn con (>) kể từ phiên bản 7, nhưng chỉ trong chế độ tiêu chuẩn. Đảm bảo bạn đang sử dụng a Doctype that triggers standards mode.

Nếu bạn đang nhắm mục tiêu IE6 thì bạn sẽ không may mắn. Bạn cần phải phụ thuộc vào JS hoặc sử dụng bộ chọn con cháu.

a>b { foo } 

trở thành

a b { foo } 
a * b { reverse-of-foo } 

Answer 2

Bộ chọn con không được hỗ trợ ở tất cả bởi IE6 và chỉ một phần bởi IE7.

Quirksmode.org: Child selector

CSS Compatibility tables

có, buồn bã, không có cách nào để làm điều này ngoại trừ việc "un-declate" các định nghĩa cho tất cả các cháu.

Answer 3

Tôi có thể sai về những gì bạn đang tìm kiếm nhưng đây là cách tôi sẽ giải quyết vấn đề của bạn:

.box {font:24px;} 
.box div {font:18px} 
.box div div {font:12px;} 

này sẽ làm việc tốt cho bạn ví dụ, tuy nhiên lưu ý rằng nếu bạn có một .box với div trong đó họ cũng sẽ bị ảnh hưởng.