Html CSS非选择器

我尝试使用

：not（）

CSS选择器，我尝试了多种组合，但没有任何效果

我的代码在这里：

我希望当我将鼠标悬停在

#steps

中的href上时，它不会突出显示包含

的文件的其余部分

我还希望，当我在

#steps

中将鼠标悬停在

上时，它会将悬停颜色更改应用于所有内容，包括锚定标记

因此，当鼠标悬停在

.waa

上时，它应该只在下面划线

当鼠标悬停在

上时，它只需将所有内容（包括锚定）的颜色更改为

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>

向你的国家发送电子邮件
用那封电子邮件向客户申请
加入

您的选择器（

li:not（a）：hover

）显示：当用户在非锚定的列表项上切换时。一个

永远不会是一个

，它将允许：

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

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

…但目前没有任何东西支持这一点，因此您目前在CSS中寻找的内容是不可能的。当锚悬停时，您可以使用JavaScript在列表项中添加和删除类。
这
li:not（a）
毫无意义。元素不能同时具有
li
和'a'标记

这里需要一个假设：has（）选择器，但是。只有这样，才能实现您的目标：

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

“它没有突出显示包含
”这句话很模糊。当然不是，除非你写了这样的代码。你有代码在鼠标上方的链接下面加下划线；除了“突出显示”其他内容之外，没有其他原因可以这样做。啊，好吧，我希望通过使用JavaScript/Jquery来完成这个任务，但我想我必须使用
.hover（）
。不过对css4很感兴趣，谢谢。