css：悬停在ul li上，不要将其悬停在ul li.dont-hover上，而不是覆盖

Question

我想知道以下是否可能，在最后半小时搜索它时找不到它所以在这里。

我有一个无序列表

<ul>
 <li class="head">Day 1</li>
 <li>10:00</li>
 <li>12:00</li>
 <li class="head">day 2</li>
 <li>10:00</li>
 <li>14:00</li>
</ul>

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
</style>

现在，如果你将鼠标悬停在li.head上，它也会得到一个红色的背景。

所以我的问题是，是否有类似

的内容

<style>
ul li.head {
 background-color:green;
}
ul li:hover !for li.head {
 background-color:red;
}
</style>

我只是想知道css中是否有这样的东西，我不是在寻找其他解决方案，这不是我的观点。

为了说清楚，我不想像

那样覆盖它

<style>
ul li.head {
 background-color:green;
}
ul li:hover {
 background-color:red;
}
ul li.head:hover {
 background-color:green;
}
</style>

我也不想

<style>
ul li:hover {
 background-color:red;
}
ul li.head {
 background-color:green;
}
</style>

我只想知道css中是否有类似的东西。

注意：您可能会想到为什么如果您可以使用此代码覆盖它，但我真的简化了这个例子。

Answer 1

你可以试试这个： -

无需覆盖。您可以指定:not()来过滤掉不需要的内容。

Sample Demo

ul li:not(.head):hover {
 background-color:red;
}

IE9下不支持。

Ref :not()