类属性含a且不以r结尾的元素背景设蓝，CSS选择器:not([class$="r"])不生效

嘿，我来帮你搞定这个CSS选择器的问题！你之前写的代码只处理了“不以r结尾”的条件，但漏掉了关键的“class包含字母a”的要求，而且直接用:not([class$="r"])会选中页面上所有不符合结尾条件的元素，范围太宽泛了，这就是代码没生效的核心原因。

正确的CSS代码 #

你需要把两个条件组合起来，同时满足“class包含a”和“不以r结尾”：

[class*="a"]:not([class$="r"]) {
  background-color: blue;
}

选择器拆解说明 #

• [class*="a"]：这个属性选择器会匹配class属性中任意位置包含字母a的元素，比如nav、card、sidebar这类class都符合要求
• :not([class$="r"])：这是一个否定伪类，用来排除掉class属性以字母r结尾的元素，比如navbar这类元素会被排除在外

示例验证 #

比如下面的HTML结构，元素会按预期变色：

<div class="nav">我会变成蓝色（class含a，且不以r结尾）</div>
<div class="navbar">我不会变色（class以r结尾）</div>
<div class="card">我会变成蓝色（class含a，且不以r结尾）</div>
<div class="footer">我不会变色（class里没有a）</div>

小提醒 #

如果元素有多个class，只要其中任意一个class满足“含a且不以r结尾”的条件，这个选择器就会生效。如果需要更精确地匹配单个class（避免多个class干扰），可能需要用更复杂的选择器，但绝大多数场景下上面的写法就足够啦。

内容的提问来源于stack exchange，提问作者boludo kid