CSS :not选择器 – 排除多个类别的鼠标悬停效果

在本文中，我们将介绍CSS :not选择器，并演示如何使用该选择器来排除多个类别的鼠标悬停效果。

阅读更多：CSS 教程

什么是CSS :not选择器？

CSS :not选择器允许我们选择不匹配指定选择器的元素。它有助于在样式中排除指定选择器的元素，从而实现更精确的选择效果。下面是:not选择器的语法：

:not(selector) {
    /* CSS 属性和值 */
}

其中”selector”是要排除的选择器。

如何排除多个类别的鼠标悬停效果？

假设我们有以下HTML代码：

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>
<div class="box blue">Box 3</div>

我们想要在鼠标悬停时对所有框进行样式变化，但不包括红色和蓝色框。我们可以使用CSS :not选择器来实现：

.box:not(.red):not(.blue):hover {
    background-color: yellow;
    color: black;
}

上面的CSS代码将仅对不具有红色和蓝色类的框悬停时应用样式。鼠标悬停在绿色框上时，背景色将变为黄色，文字颜色将变为黑色。

示例说明

HTML代码：

<div class="box red">Box 1</div>
<div class="box green">Box 2</div>
<div class="box blue">Box 3</div>

CSS代码：

.box:not(.red):not(.blue):hover {
    background-color: yellow;
    color: black;
}

示例效果：

当你将鼠标悬停在绿色框上时，它的背景色将变为黄色，文字颜色将变为黑色。而红色和蓝色框则不受影响。

总结

通过使用CSS :not选择器，我们可以排除多个类别的元素，实现更精确的选择效果。在本文中，我们演示了如何使用:not选择器来排除多个类别的鼠标悬停效果。你可以根据这个示例，根据自己的需求来修改和应用这个选择器。希望本文对你学习和理解CSS选择器有所帮助。