IE8中的first-child和last-child

Question

IE8中的first-child和last-child

60

我有一些用于调整表格样式的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。

我知道问题源自于first-child和last-child，但我不是专家。

有什么想法可以修复它吗？

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

- Bronzato

35

IE8不支持:last-child选择器（尽管我认为它支持:first-child，因为这在CSS 2.1规范中有提到，而:last-child在CSS 3中才被引入）。 - James Allardice

也许我们可以通过选择除了:first-child之外的所有其他td来欺骗？有什么想法吗？这样我们就可以得到两个选择...？ - Bronzato

1

@Bronzato：除了:first-child之外的所有内容都不同于:last-child，除非您的表只有两列。 - BoltClock

是的，我的表只包含两列 :) - Bronzato

3个回答

34

:last-child 是 CSS3 伪类选择器，不支持在 IE8 中使用。我相信 :first-child 可以使用，因为它在 CSS2.1 规范中有定义。

一种可能的解决方案是给最后一个子元素添加一个 class 名称并对该 class 进行样式设置。

另一种方法是使用 JavaScript。jQuery让这变得特别容易，因为它提供了一个 :last-child 伪类选择器，可以在 IE8 中工作。不幸的是，这可能会导致 DOM 加载时出现未经过样式设置的内容瞬间出现。

- James Allardice

4

jQ 确实很好用，只需在我的全局 .js <link> 中添加这行代码 $(".bordTL th:last-child").css("border-right","1px solid black"); 即可。这只是一个小的清理工作，所以延迟一秒并不是太严重。 - gordon

1

刚刚看到了 $("#nav li:last-child").addClass('last-child') 这段代码（感谢 Jason 在 https://dev59.com/d3M_5IYBdhLWcg3wp0wX 上的分享）。 - gordon

3

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

- blues_driven

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

如果你的表格只有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; 
}

否则，您将需要使用JS选择器库，如jQuery，或手动向最后一个td添加一个类，由James Allardice建议。