在 CSS 选择器中排除特定的类名称
在 CSS 中,在某些情况下您可能需要从选择器中排除特定的类名称。当您想要将样式应用于多个元素,但某些元素不应继承这些样式时,这特别有用。
一种常见的情况涉及排除具有特定类名称的元素,同时将样式应用于具有另一个类名称的元素。让我们考虑以下示例:
1 2 3 4 5 6 7 |
|
在此示例中,我们希望在悬停时将背景颜色应用于具有“reMode_hover”类名称的元素。但是,如果元素也具有“reMode_selected”类名,我们不想应用此颜色。
1 2 3 4 |
|
虽然您可能期望第一条规则起作用,但它不起作用。这是因为在 CSS 中,类名之间的空格表示后代选择器。因此,“.reMode_selected .reMode_hover”翻译为“选择 .reMode_selected 的后代的 .reMode_hover 元素。”
要正确排除“reMode_selected”元素,我们需要使用“not()”选择器。更新后的 CSS 将为:
1 |
|
此规则会将背景颜色应用于没有 .reMode_selected 类名的 .reMode_hover 元素。因此,只有第一个链接在悬停时才会收到背景颜色,而第二个链接则不会。
以上是如何在 CSS 选择器中排除特定的类名?的详细内容。更多信息请关注PHP中文网其他相关文章!