CSS不选择器 [英] CSS Not Selector

问题描述

我尝试使用：not（） CSS选择器，我尝试过多个组合，没有什么是正常工作。

I'm trying to use a :not() CSS selector, and I've tried multiple combinations of this and nothing is working.

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

我想要的是，当我将鼠标悬停在 #steps 中的href时不会突出显示其余的< li> 。

I would like it to be that when I hover over an href in #steps, it doesn't highlight the rest of the containing <li>.

悬停在< li> 在 #steps 中，它将鼠标悬停颜色更改应用于一切， 。

I would also like it that when I hover over an <li> in #steps, it applies the hover color change to everything, including the anchor tags.

因此，当悬停在 .wa a 时，应该加上下划线。

So when hovering over .wa a it should just underline that.

当悬停在< li> 上时，应该将包括定位符在内的所有东西的颜色都改为 rgb 81，95）。

When hovering over the <li> it should just change the color of everything including the anchors to 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>

推荐答案

not（a）：hover ）说：当用户覆盖不是锚点的列表项时。 < li> 永远不会是< a> 。

Your selector (li:not(a):hover) says: When the user overs over a list item that is not an anchor. An <li> will never be a <a>.

我想要的是，当我将鼠标悬停在#steps中的href时，它不会突出显示其余的< li> 。

将鼠标悬停在< li> 它应该只是改变一切的颜色，包括锚点到 rgb（66，81，95）。

When hovering over the <li> it should just change the color of everything including the anchors to rgb(66, 81, 95).

这里的问题是你不能将鼠标指向链接，而不指向链接所在的列表项。

The problem here is that you cannot point the mouse at the link without also pointing it at the list item that the link is inside.

CSS 4提议：has（） 这将允许：

CSS 4 proposes :has() which would allow:

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

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

...但目前没有任何支持，所以你在寻找是不可能的CSS现在。您可以使用JavaScript在列表项中添加和删除类。锚点被悬停时。

… but nothing currently supports that so what you are looking for is impossible in CSS at present. You could use JavaScript to add and remove classes from the list item when the anchor is hovered though.

这篇关于CSS不选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！