Question

我正在尝试使用:not() CSS选择器，我尝试了多种组合，但没有任何工作。

我希望当我将鼠标悬停在#steps中的href上时，它不会突出显示包含<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 proposes :has()允许：

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

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

...但目前没有任何内容支持，因此目前在CSS中找不到你想要的内容。您可以使用JavaScript在悬停锚点时从列表项中添加和删除类。

Answer 2

这li:not(a)毫无意义。元素不能同时包含li和“a”标记。

这里你需要的是一个假设：has（）选择器，但it does not exist yet。只有这样才有可能实现你想要的目标：

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

CSS不选择器

2 个答案: