CSS不选择(CSS Not Selector)

我试图用一个:not() CSS选择器，我已经试过这种多重组合，并没有什么工作。

我的代码是在这里： http://jsfiddle.net/cLevkr4e/2/

我想它是当我悬停在一个href #steps ，它不突出含的其余部分<li>

当我将鼠标悬停在一个我也想它<li>在#steps ，它适用悬停颜色改变一切，包括锚标记。

因此徘徊在当.wa a它应该只是强调。

当悬停在<li>它应该只是改变一切的颜色包括锚rgb(66, 81, 95)

我的CSS：

 .wa a{
color: rgb(68, 118, 67);
}

.steps {
width:400px;
margin:0 auto;
text-align:left;
line-height: 200%;
}

.steps a:hover {
text-decoration: underline;
}

.steps li:not(a):hover{
cursor: pointer;
color: rgb(66, 81, 95);
}

我的HTML：

<div class="steps">
<ul>
<li>Apply an Email To Your Nation</li>
<li>Apply To the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span> With That Email</li>
<li>Join the <span class="wa"><a href="http://www.nationstates.net/page=un">World Assembly</a></span></li>
</div>

Answer 1:

您的选择（ li:not(a):hover ）说： 当用户在接管这不是锚定列表项 。 一个<li>永远不会成为一个<a> 。

我想它是当我悬停在#steps一个href，它不突出含的其余部分<li>

当悬停在<li>它应该只是改变一切的颜色包括锚rgb(66, 81, 95)

这里的问题是，你不能指向该链接的鼠标也没有在那个链接里面的列表项指向它。

CSS 4中提出:has()这将允许：

li:hover {
    color: rgb(66, 81, 95)l
}

li:hover:has(a:hover) {
    color: black;
}

...但没有目前支持等什么你正在寻找目前在CSS不可能的。 你可以使用JavaScript当锚虽然徘徊，从列表项中添加和删除类。

Answer 2:

这li:not(a)是没有意义的。 元素不能有li和'一”的标签在同一时间。

你所需要的就是一个假设：有（）选择，但它还不存在 。 只有它有可能实现你想要什么：

li:hover { color:red; }
li:hover a { color:inherit; }
li:has(a:hover) { color:black; }

文章来源: CSS Not Selector