li:last-child 似乎在 IE8 中不起作用答案

【问题标题】：li:last-child doesn't seem to work in IE8li:last-child 似乎在 IE8 中不起作用
【发布时间】：2012-06-03 18:09:08
【问题描述】：

下面是我的html结构

<div class="footerMenu">
   <ul>
     <li>Home</li>
     <li>About</li>
     <li>Feedback</li>
     <li>Contact us</li>        
   </ul>            
</div>

但是

.footerMenu li:last-child { }

选择器似乎在 IE8 中不起作用。但是http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx 表示支持伪选择器。对此有任何帮助！

【问题讨论】：

我 99% 确定它不受支持
你有没有试过 .footerMenu li: { 一些激烈的东西； } 看看这是否有效？
不，实际上没有。它在那里说它在 IE9 及更高版本中受支持。
stackoverflow.com/questions/1293369/using-last-child-in-css
是的，只有 .footerMenu li{} 有效

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

【解决方案1】：

你读错了。它说它在 IE8 中不支持：

如果您正在查看:first-child，它确实支持 IE7 和 IE8，并认为这同样适用于 :last-child... 惊喜！没有。

:first-child 是 CSS2 选择器，但 :last-child 仅在 CSS3 中引入，因此由于 Microsoft 的目标只是 CSS2.1 与 IE8 兼容，因此他们可能直到 IE8 之后才关心 :last-child。

如果您知道您将只有四个 li 元素，那么您应该能够使用相邻的兄弟选择器来到达第四个 li：

.footerMenu li:first-child + li + li + li

【讨论】：

是的，我认为既然第一个在那里，甚至最后一个也会受到支持。感谢您的信息。
顺便说一下，表格做出错的是 IE9 对 CSS3 对 CSS1/2 伪元素的双冒号表示法的支持（虽然奇怪的是，它对 CSS3 伪元素来说是正确的-元素）：stackoverflow.com/questions/7157405/…

【解决方案2】：

要建立在其他人的答案之上，另一种方法是使用 javascript 来填补空白，selectivizr 是添加最后一个孩子支持的一个很好的例子。

http://selectivizr.com/

【讨论】：

【解决方案3】：

您提供的链接显示它不支持 IE8... 仅 IE9+。谷歌搜索 last-child IE8 会出现大量类似的查询。

【讨论】：

【解决方案4】：

你在哪里读到的？ :first-child 支持回 IE7，但 :last-child 是 IE9 及更高版本。

（为方便起见，标题向下移动）

【讨论】：

对不起我的错误..我忽略了它！

【解决方案5】：

IE8 不支持 last-child 的其他答案是正确的。但是，为了解决您的特定问题，您可以 a) 手动将一个类添加到最后一个 <li> 或 b) 因为这是一个菜单，并且这些可能在其中有链接，使用属性选择器定位最后一个链接，这在 IE8 中确实有效。类似的东西

.footermenu a[href="contact.html"] { ... }

【讨论】：

【解决方案6】：

尝试使用类似的东西：

.footerMenu li {background-color: expression(this.previousSibling==null?'red':'green');}

【讨论】：

【解决方案7】：

我知道它很旧，但是...有一个简单的方法可以做到：

就在你想要改变的 li 中这样做：

<li style="yourstyle;">...</li>

【讨论】：