IE6中的子选择器是否有任何修复答案

【问题标题】：Is there any Fix for child selector in IE6IE6中的子选择器是否有任何修复
【发布时间】：2010-03-10 08:41:52
【问题描述】：

在使用 :first-child :last-child 时，在 css 中它在 IE7、FF 中可以正常工作。

有没有办法解决这个问题。

使用 Javascript 很好。如果它在没有 javascript 的情况下也能工作，那就太好了。

【问题讨论】：

【解决方案1】：

您可以使用语义类名称来减轻您在 IE6 中的痛苦。比如：

  <ul>
    <li class="first">First Item</li>
    <li>Second Item</li>
    <li class="last">Last Item</li>
  </ul>

然后在你的 CSS 中使用：

ul .first { color: #F00; }
ul .last { color: #00F; }

【讨论】：

这绝对是一种快速修复解决方案，您的子元素不会发生太大（或根本没有）变化。
没有 JS 的好解决方案。很聪明。 +1
这不是一个解决方案，因为如果您使用的是第一个孩子或最后一个孩子，您很可能无法静态添加特定的类

【解决方案2】：

谢谢大家，

这是我最终用于此解决方案的 javascript 版本。

  <script>

  $(document).ready(function(){
    $("ul li:last-child").addClass("last");
    $("ul li:first-child").addClass("first");

  });
  </script>

【讨论】：

【解决方案3】：

有一个不需要更改 HTML 的精确解决方案。使用微软的“动态样式”。这是一个例子：

<html>
<head>
<style type="text/css">
tr td:first-child {font-weight:bold; background-color:green;}
tr td:last-child {background-color:orange;}
tr td {_font-weight:expression(this.previousSibling==null?'bold':'normal'); _background-color:expression(this.previousSibling==null?'lightgreen':(this.nextSibling==null?'orange':''));}
</style>
</head>
<body>
<table>
 <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
 <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
 <tr><td>First</td><td>Second</td><td>Third</td><td>Last</td></tr>
</body>
</html>

另见http://mauzon.com/pseudoclasses-first-child-and-last-child-for-ie6/。

【讨论】：

【解决方案4】：

修复一堆 IE 不一致的更通用的库是 Dean Edwards 的 IE7：http://dean.edwards.name/IE7/

【讨论】：