如何在 CSS 选择器中排除特定的类名？

在 CSS 选择器中排除特定的类名称

在 CSS 中，在某些情况下您可能需要从选择器中排除特定的类名称。当您想要将样式应用于多个元素，但某些元素不应继承这些样式时，这特别有用。

一种常见的情况涉及排除具有特定类名称的元素，同时将样式应用于具有另一个类名称的元素。让我们考虑以下示例：

<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_hover”类名称的元素。但是，如果元素也具有“reMode_selected”类名，我们不想应用此颜色。

<code class="css">/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

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

虽然您可能期望第一条规则起作用，但它不起作用。这是因为在 CSS 中，类名之间的空格表示后代选择器。因此，“.reMode_selected .reMode_hover”翻译为“选择 .reMode_selected 的后代的 .reMode_hover 元素。”

要正确排除“reMode_selected”元素，我们需要使用“not()”选择器。更新后的 CSS 将为：

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

此规则会将背景颜色应用于没有 .reMode_selected 类名的 .reMode_hover 元素。因此，只有第一个链接在悬停时才会收到背景颜色，而第二个链接则不会。

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