Question

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

来应用不同的样式

以下是许多样式表中的CSS，amoungst其他样式：

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

在Chrome和Firefox中一切都运行得很好（就像它一直一样）并且'hover'在IE9和＆ 10预览（在Win 7上）但由于一些奇怪的原因，“最后一个孩子”在IE9＆amp; 10（在3台计算机上测试）。

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

Answer 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

问题可能出在你的加价上。

Answer 2

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

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

Internet Explorer版本＆lt; 9，Safari＆lt; 3.2肯定不支持它，虽然Internet Explorer 7和Safari 3.2确实支持：第一个孩子，好奇。

....如果你想拥有一个首先100％工作的伪：孩子会工作：

你可以解决这个问题，让它倒转，以便最后一个适合你的愿望（第一个：儿童方法）

或去手册：

对于您的示例，您可能需要像这样进行类定义：

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>

CSS伪类在IE9中不起作用

2 个答案: