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

我遇到了一些黑客: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/ 使用 star html

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

您可以使用jQuery,这不是一个漂亮的解决方案,但这是我过去使用过的一个选项:

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

我在《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确实支持expression()之类的东西。

该表达式使用正则表达式(/currentpage/),并针对父节点的类对其进行测试,因此元素li.currentpage的直接子元素将设置为#eff,其他子元素将设置为#ef0。

请注意,使用的颜色是假的,请不要对其进行评论;-)

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

div span { ... }

也许你可以利用它来实现你的目标。也许你可以发布一些代码,以便我们能给你一个更具体的答案?

在元素上放置自定义类。

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

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

我使用的跨浏览器解决方案如下。它没有使用IE6技术,也没有正确显示嵌入列表(比如说,您需要以不同的方式设置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 */
}