什麼是兒童選擇器的替代品？

由於IE6不支持子選擇器（請參閱http://kimblim.dk/csstest/#ex1），在處理此瀏覽器時有什麼替代方法？什麼是兒童選擇器的替代品？

我不想修改標記，我更更喜歡僅CSS的解決方案...

是的，這是直接的孩子，我希望的目標。

謝謝！

2009-01-12 Ryan Shripat

我遇到黑客攻擊的東西：http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ 使用「star html」聯合破解的IE（6及以下）這讓我選擇直接孩子。比方說，我們要的10px的填充，頂部適用於直接子，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 */ 
}

我很欣賞你的答覆迄今，但我很討厭接受我自己的答案一樣多，這是我最終解決的解決方案。多謝你們！

來源

2009-01-12 21:14:45

您可以使用jQuery的，不是一個漂亮的解決方案，但它是我在過去使用的一個選項：

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

你顯然會希望把這個包在一些專門的IE6只檢查。並且可能需要包裝在IE6 IF語句中的樣式表來添加這些特定的樣式。

來源

2009-01-12 19:38:41

你需要直接的孩子嗎？ IE6支持後代選擇器，如

div span { ... }

也許你可以利用它來定位你想要的東西。也許你可以發佈一些代碼，以便我們可以給你一個更具體的答案？

來源

2009-01-12 19:38:43

不，他們的意思是「父母>孩子」，它只使用直接的孩子，而不是所有的孩子。 – 2009-01-12 19:40:46

是的，我明白了 - 如果你可以聰明一點，有時使用正常的後裔選擇器可以在一個捏 – 2009-01-12 19:41:54

將自定義類放在元素上。

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

來源

2009-01-12 19:39:03

這是一個修復：第一個孩子的問題，而不是>。 – Sprintstar 2011-03-22 12:28:07

不是一個好的解決方案 – 2011-07-01 03:35:04

可以在所有第一個孩子上放一個類，但是要小心，如果你有嵌套列表（這很可能在擔心匹配的非直接孩子時），你必須爲每個孩子使用不同的類名一。否則`ul li.child`會匹配兩者，這可能不是：`

` – Krinkle 2012-01-14 00:22:36

這裏是一個很好的解決方案我在一本書中發現：「的JavaScript詩集」

類似的東西：

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

，並滿足IE代碼：

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

對IE的破解是隻有IE認爲有一個HTML包裝器，IE確實支持表達式（）的東西。

該表達式使用正則表達式（/ currentpage /），並針對父節點的類進行測試，因此元素li.currentpage的直接子元素將被設置爲#eff，其他子元素將被設置到＃ef0。

注意，使用的顏色是假的，請不要對他們;-)評論

來源

2009-10-20 08:48:19 Horace

使用此

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

首先，針對所有兒童，然後通過針對所有重置CSS聲明孫子。

來源

2010-02-11 01:38:50

這篇文章討論了所有的不同的選擇在年底IE6模仿CSS子選擇器，包括一個小竅門與嵌套結構的工作：http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

來源

2010-05-19 18:17:31

，我已經使用了一個跨瀏覽器的解決方案如下。它不使用IE6 hack並正確顯示嵌入列表（例如，您需要以不同方式對OL和UL嵌套項目進行樣式設置）。

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 */ 
}

這和yodeling CSS一樣簡單！

來源

2011-06-08 19:56:56

什麼是兒童選擇器的替代品？

回答

相關問題