Question

由于IE6不支持子选择器（参见http://kimblim.dk/csstest/#ex1），处理此浏览器时有哪些替代方法？

我不想修改标记，我更喜欢仅使用CSS的解决方案......

是的，这是我想要的直接孩子。

谢谢！

Answer 1

我遇到了一些黑客攻击：http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ 使用'star html'hack for IE（6及以下）与此结合使我可以选择直接子项。假设我们想要将10px的填充顶部应用于E的直接子F：

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

到目前为止，我非常感谢您的回复，但我不想接受自己的回答，这是我最终解决的问题。谢谢你们！

Answer 2

你可以使用jQuery，而不是一个漂亮的解决方案，但它是我过去使用过的一个选项：

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

你显然想要在一些专门的IE6中检查它。并且可能需要在IE6 IF语句中包含样式表来添加这些专用样式。

Answer 3

这是我在一本书中找到的一个很好的解决方案：“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。

请注意，使用的颜色是假的，请不要对它们发表评论; - ）

Answer 4

本文讨论了在IE6中模拟CSS子选择器的所有不同选项，包括最后使用嵌套结构的一个小技巧：http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

Answer 5

你需要直接的孩子吗？ IE6支持后代选择器，如

div span { ... }

也许你可以利用它来定位你想要的东西。也许你可以发布一些代码，以便我们可以给你一个更具体的答案？

Answer 6

在元素上放置自定义类。

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

Answer 7

使用此

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

首先，您定位所有孩子，然后通过定位所有孙子来重置css声明。

Answer 8

我使用的跨浏览器解决方案如下。它不使用IE6 hacks并正确显示嵌入列表（假设您需要以不同方式设置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一样简单！

子选择器的替代品是什么？

8 个答案: