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