Question

我无法弄清楚如何从嵌套在LI中的子UL中更改父LI（文本“Black”）中的文本颜色。这是我的HTML代码：

<nav>
<ul class="nav-main">
<li class="dropdown"><a href="#">Etc</a></li>
<li class="dropdown active"><a href="#">Black</a></li>
    <ul class="dropdown-menu">
    <li class="green"><a href="#">Green</a></li>
    <li class="red"><a href="#">Red</a></li>
    <li class="purple"><a href="#">Purple</a></li>
    </ul>
<li class="dropdown"><a href="#">Etc</a></li>
</ul>
</nav>

这是CSS：

nav ul.nav-main li.active > a,
nav ul.nav-main li.active > a:hover {
    color: #000000;
}

nav ul.nav-main ul.dropdown-menu li.green > a {
    color: #78AB46;
}

nav ul.nav-main ul.dropdown-menu li.red > a {
    color: #ff0000;
}

nav ul.nav-main ul.dropdown-menu li.purple > a {
    color: #7D26CD;
}

这是JSFiddle：

http://jsfiddle.net/X4eFP

我想要发生的是当鼠标悬停在子UL“下拉菜单”中的任何LI上时，父LI“下拉活动”文本（“黑色”）从其当前颜色变为黑色，颜色为蓝色。我不知道如何爬上父/子梯来编辑父文本的颜色。我只知道如何编辑鼠标当前悬停的类的文本颜色（而不是其父级）。

我已经尝试过编辑我的CSS几个小时，但无法得出任何结论。

提前谢谢！

Answer 1

您不能使用CSS遍历DOM树（换句话说，您无法选择元素的父节点），因此您将无法按照要求的方式执行此操作。您可以做的是向:hover本身添加<li>样式：

nav ul.nav-main .dropdown.active:hover > a {
    color:blue;
}

这样您就不会选择<ul>，而是选择父<li>本身。然后，您可以通过直接子选择器<a>选择<li>内的>。您必须将<ul>嵌套在实际<li>内。您无法将<ul>直接放在另一个<ul>（或<ol>）中。

Demo

Answer 2

您的html对于下拉列表不正确。

<li class="dropdown active"><a href="#">Black</a>  /*removed the </li> from here */
        <ul class="dropdown-menu">
        <li class="green"><a href="#">Green</a></li>
        <li class="red"><a href="#">Red</a></li>
        <li class="purple"><a href="#">Purple</a></li>
        </ul>
</li> /* put the </li> here */

就像其他人所说的那样，你不能在CSS中设置父级样式。但是，当您将父</li>放在子菜单列表/无序列表下方时，只要您将鼠标悬停在子菜单上，您仍然将鼠标悬停在该li（黑色）上。

CSS

.dropdown:hover { 
    color: blue;
 }

DEMO http://jsfiddle.net/X4eFP/1/

你会在演示中注意到，列表的圆圈现在正从黑色变为蓝色。

仍在处理文本更改（文本是href链接的一部分），似乎有些css样式正在覆盖当前更改蓝色。

适当的CSS改变嵌套UL的父LI中的文本颜色

2 个答案: