CSS不是選擇器

Question

我正在嘗試使用:not() CSS選擇器，並且嘗試了多種選擇，但沒有任何效果。

我的代碼在這里： http : //jsfiddle.net/cLevkr4e/2/

我希望當我將鼠標懸停在#steps的href #steps ，它不會突出顯示其余的<li> 。

我還希望當我在#steps鼠標懸停在<li>上#steps ，它將懸停顏色更改應用於所有內容，包括錨標記。

因此，將.wa a懸停在.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和`a'標記。

這里需要的是一個假設的：has（）選擇器，但它尚不存在 。 只有有了它，才有可能實現您想要的：

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