CSS 伪类在 IE9 中不起作用答案

【问题标题】：CSS psuedo class not working in IE9CSS 伪类在 IE9 中不起作用
【发布时间】：2013-01-10 16:13:49
【问题描述】：

我有一个带有引导程序的 Wordpress 主题，它有一个导航菜单。对于最后一个菜单项，我想使用 :last-child 应用不同的样式。

这是 CSS，在众多样式表之一中的其他样式中：

#main-nav ul.menu li:last-child a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

在 Chrome 和 Firefox 中一切正常（一如既往），“悬停”在 IE9 和 10 预览版（在 Win 7 上）中运行良好，但由于某些奇怪的原因，“最后一个孩子”无法正常工作在 IE9 和 10 中（在 3 台计算机上测试）。

我已清除缓存并尝试了各种方法，但无法正常工作。

【问题讨论】：

li实际上是最后一个孩子，还是有一个空的文本节点之类的？
@robertc：我不认为 CSS 会考虑文本节点。还是这样？
如果您将 last-child 类添加到您的 css 并以编程方式将其应用到您的 HTML 会发生什么？
你能提供一个jsfiddle.net 它不起作用吗？如果简化的演示不起作用，您可能会遇到某种特异性冲突。
@FelixKling 我认为你是对的，我只知道由于文本节点经常存在 DOM 差异

标签： css internet-explorer-9

【解决方案1】：

我在 IE9 上对此没有任何问题。

<ul>
  <li>Text</li>
  <li><a>Text</a></li>
</ul>

li:last-child a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

试试这个DEMO

问题可能在于您的标记。

【讨论】：

【解决方案2】：

注意：我说的是跨浏览器（不仅仅是 IE9...）

last-child 还不是 100% 跨浏览器友好：

Internet Explorer 版本

....如果你想要一个 100% 工作的伪代码， first:child 会工作：

你可以把它倒过来，这样最后一个就可以满足你的需求（第一个：子方法）

或手动：

对于您的示例，您可能必须像这样定义类：

CSS：

#main-nav ul.menu li .last a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

你的html

    <ul>
    <li><a href="#">sdfds</a></li>
    <li><a href="#">sdfds</a></li>
    <li class="last"><a href="#">dfgdrg</a></li>
    </ul>

【讨论】：

虽然这可能是真的，但它并没有回答 OP 的问题。 IE9是否支持:last-child.
同意...但这可能是另一种方法...。这在我的 IE9 上工作（他的问题/代码） 可能是较低版本的 IE。
他在他的问题中说他不是