IE8 的第一个孩子和最后一个孩子答案

【问题标题】：first-child and last-child with IE8IE8 的第一个孩子和最后一个孩子
【发布时间】：2012-02-09 01:54:58
【问题描述】：

我有一些 css 用于调整我的表中的东西。

这里是：

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

它适用于 Firefox、Safari 和 Chrome，但不适用于（目前）IE8。

我知道问题出在第一个孩子和最后一个孩子，但我不是专家。

知道如何解决吗？

PS：我在我的 html 文档顶部添加了<!doctype html>，但没有任何改变。

【问题讨论】：

IE8 不支持:last-child（尽管我相信它确实支持:first-child，因为这是在CSS 2.1 规范中，而:last-child 在CSS 3 中）。
也许我们可以通过选择除 :first-child 之外的所有其他 td 来欺骗？任何想法？所以我们可以同时选择...？
@Bronzato: "all other than :first-child" 与 ":last-child" 不同，除非你的表只有两列。
是的，我的表只包含两列:)

标签： css internet-explorer-8 css-selectors

【解决方案1】：

如果您的表只有 2 列，您可以使用相邻的兄弟选择器轻松到达第二个 td，IE8 与 :first-child 一起支持：

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

否则，您将不得不使用像 jQuery 这样的 JS 选择器库，或者手动将类添加到最后一个 td、as suggested by James Allardice。

【讨论】：

不错的...从来没想过！
+1 很棒的解决方案。谢谢。 (except myne is .rowClose > td+td+td+td+td+td+td)i.stack.imgur.com/08jym.jpg
让你玩 IE8。看来没有别的办法了，那就创建一千个 class="last_child" 吧。

【解决方案2】：

由于:last-child 是CSS3 伪类，IE8 不支持。我相信 :first-child 是受支持的，因为它在 CSS2.1 规范中定义。

一种可能的解决方案是简单地给最后一个孩子一个类名和该类的样式。

另一个是使用 JavaScript。 jQuery 使这变得特别容易，因为它提供了一个 :last-child 伪类，它应该在 IE8 中工作。不幸的是，这可能会导致在 DOM 加载时出现无样式的内容。

【讨论】：

jQ 运行良好，只需添加到我的全局 .js $(".bordTL th:last-child").css("border-right","1px solid black"); 这是一个小清理，因此延迟一秒钟并不令人震惊。
刚看到$("#nav li:last-child").addClass('last-child')（谢谢杰森stackoverflow.com/questions/1293369/using-last-child-in-css）

【解决方案3】：

如果您想继续使用 CSS3 选择器但需要支持旧版浏览器，我建议您使用诸如 Selectivizr.js 之类的 polyfill

【讨论】：