Thay thế cho bộ chọn con là gì?

Question

Vì IE6 không hỗ trợ bộ chọn con (xem http://kimblim.dk/csstest/#ex1), thay thế khi xử lý với trình duyệt này là gì?

Tôi không muốn sửa đổi đánh dấu, và tôi muốn nhiều hơn thế thích một giải pháp CSS-chỉ ...

Và có, nó là con trực tiếp mà tôi muốn nhắm mục tiêu.

Cảm ơn!

Answer 1

Tôi đã đi qua một cái gì đó của một hack: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ Sử dụng 'star html' hack cho IE (6 và dưới) kết hợp với điều này cho phép tôi để chọn con trực tiếp. Hãy nói rằng chúng ta muốn áp dụng padding-top của 10px cho đứa trẻ trực tiếp, F, E:

* html body E F 
{ 
    /* apply style here for IE 6 */ 
    padding-top: 10px; 
    /* This applies the style to every F inside of E */ 
} 
* html body E * F 
{ 
    /* undo style here */ 
    padding-top: 0px; 
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */ 
} 

Tôi đánh giá cao sự trả lời của bạn cho đến nay nhưng càng nhiều càng tốt Tôi ghét phải chấp nhận câu trả lời của riêng tôi, đây là giải pháp cuối cùng tôi đã giải quyết. Cảm ơn các bạn!

Answer 2

Bạn có thể sử dụng jQuery, không phải là một giải pháp khá, nhưng nó là một lựa chọn mà tôi đã sử dụng trong quá khứ:

$("parent > child").each(function() { 
    $(this).addClass("child-styles"); 
} 

rõ ràng Bạn sẽ muốn quấn này trong một số IE6 chuyên ngành chỉ kiểm tra. Và có lẽ muốn có một tấm phong cách bọc trong tuyên bố IF IE6 để thêm những phong cách chuyên ngành.

Answer 3

Bạn có cần con trực tiếp không? IE6 hỗ trợ bộ chọn hậu duệ như

div span { ... } 

Có lẽ bạn có thể tận dụng để nhắm mục tiêu theo ý mình muốn. Có lẽ bạn có thể đăng một số mã để chúng tôi có thể cung cấp cho bạn câu trả lời cụ thể hơn?

Answer 4

Đặt lớp tùy chỉnh trên phần tử.

<ul> 
<li class="first">Blah<li> 
<li>Blah<li> 
<li>Blah<li> 
</ul> 

Answer 5

Đây là một giải pháp tốt tôi đã tìm thấy trong một cuốn sách: "The Anthology của javascript"

Something như thế:

/* for all but IE */ 
#nav ul li.currentpage > a:hover { 
    background-color: #eff; 
} 

Và mã để phục vụ cho IE:

/* for IE */ 
* html #nav ul li.currentpage a:hover { 
    background-color: expression(/currentpage/.test(this.parentNode.className)? "#eff" : "#ef0"); 
} 

Việc hack cho IE là chỉ có IE nghĩ rằng có một wrapper trên html, và IE không hỗ trợ các công cụ expression().

Biểu thức sử dụng cụm từ thông dụng (/ currentpage /) và kiểm tra nó đối với lớp của nút cha, vì vậy các con trực tiếp của phần tử li.currentpage sẽ được đặt thành #eff, các hậu duệ khác sẽ được đặt tới # ef0.

Lưu ý rằng các màu sắc được sử dụng là giả mạo, xin đừng bình luận gì về họ ;-)

Answer 6

Sử dụng này

div * { padding-left:20px; } 
div * * { padding-left:0; } 

Trước tiên, bạn nhắm mục tiêu tất cả trẻ em, và sau đó bạn thiết lập lại tờ khai css bằng cách nhắm mục tiêu tất cả cháu.

Answer 7

bài này thảo luận về tất cả các tùy chọn khác nhau cho bắt chước selectors CSS con trong IE6, trong đó có một mẹo nhỏ ở cuối để làm việc với các cấu trúc lồng nhau: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

Answer 8

Một giải pháp qua trình duyệt mà tôi đã sử dụng như sau . Nó không sử dụng IE6 hack và hiển thị danh sách nhúng một cách chính xác (nói rằng bạn cần phải phong cách OL và UL lồng nhau các mục khác nhau).

ul, ol { 
    /* Set margins, padding, and other generic styles */ 
} 
ul li, ul ul li, ol ul li { 
    list-style-type: disc; /* unordered lists */ 
} 
ol li, ul ol li, ol ol li { 
    list-style-type: decimal; /* ordered lists */ 
}

Thật dễ dàng như CSS yodeling!