如何从 CSS 选择器中排除特定类：分步指南

从 CSS 选择器中排除特定类

当定位具有多个类的元素时，准确选择或排除特定类以实现所需的效果变得至关重要造型。本文讨论了一种常见场景，您需要将背景颜色应用于具有特定类的元素，但排除那些也具有其他特定类的元素。

示例场景

考虑以下 HTML 标记：

<code class="html"><a href="" title="Design" class="reMode_design  reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design  reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

目标是当用户将鼠标悬停在第一个链接上时将背景颜色应用于第一个链接，但从该效果中排除第二个链接，因为它具有附加类“reMode_selected” ."

初始尝试

您最初可以尝试以下 CSS：

<code class="css">.reMode_selected .reMode_hover:hover {}

.reMode_hover:hover {
   background-color: #f0ac00;
}</code>

但是，这将无法正常工作，因为第一个规则覆盖第二条规则。要正确排除具有“reMode_selected”类的元素，请使用多类选择器：

<code class="css">.reMode_hover:not(.reMode_selected):hover {
   background-color: #f0ac00;
}</code>

此规则以具有“reMode_hover”类的元素为目标，但排除那些也具有“reMode_selected”类的元素都悬停在上面。因此，第一个链接将在悬停时接收背景颜色，而第二个链接将保持不变。

以上是如何从 CSS 选择器中排除特定类：分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！