0

我有一个带有引导程序的 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 台计算机上测试）。

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

4

2 回答 2

0

我在 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;
}

试试这个演示

问题可能出在您的标记中。

于 2013-01-10T16:19:06.533 回答
-1

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

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

Internet Explorer 版本 < 9 和 Safari < 3.2 肯定不支持它，尽管 Internet Explorer 7 和 Safari 3.2 确实支持 :first-child，奇怪的是。

....如果你想有一个 100% 工作的伪第一个：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>
于 2013-01-10T16:20:19.560 回答