首页 > web前端 > css教程 > 正文

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

Mary-Kate Olsen
发布: 2024-11-04 22:29:01
原创
945 人浏览过

How to Exclude Specific Class Names in CSS Selectors?

在 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!