css - 获取菜单为白色的有效父订单项

Question

JS fiddle here :

我希望事件文本项和悬停文本项都具有白色文本。现在只有悬停的元素才符合预期。所以我尝试添加:

 .dropdown > ul li a:hover, .dropdown ul li.current_page_item a {
  color: white;}

我希望看到事件菜单项有橙色文本，以及悬停的文本。但看起来添加此效果也会影响未悬停的下拉订单项。我怎样才能隔离以排除这种影响？

例如，如果您将上面的 CSS 片段添加到 js fiddle 并点击运行，看看下拉菜单会发生什么。屏幕截图在这里:

下拉列表中的那些元素不应该有白色文本，这种样式只是为了影响悬停和事件的菜单项。

我如何添加 CSS 使其只有事件和悬停的元素有白色文本(与它们一起出现的橙色背景形成对比)？

Answer 1

这只是使用 direct child combinator, > 隔离样式的问题.

Updated Example

.dropdown ul li.current_page_item > a,
.dropdown > ul li > a:hover {
    color: #fff;
}

如果您希望文本在悬停在整个 li 元素上时改变颜色，请使用选择器:

.dropdown > ul li:hover > a 

Example Here