CSS：如何使用：not添加多个选择器（其中一个是[attribute * = value]）

Question

试图选择那些!! .control-label，* ='text-'但失败的标签。

例如下面所示，我希望将“ 0.00”设置为color =＃000f1d，但它会变成color：＃000（正文）

---

在Bolt的帮助下，使用工作版本再次更新，发现我缺少了：not（）<---括号！ （和丢失）

body {
  color: #000;
}

.control-label {
  color: blue;
}

.text-danger {
  color: red;
}

form label:not([class*='text-']):not(.control-label) {
  color: #000f1d;
}

<form>
  <div class="form-group">
    <label class="col-xs-6 col-sm-6 control-label">Sample</label>
  </div>
  <div class="form-group">
    <label class="col-xs-6 col-sm-6">0.00</label>
  </div>
  <div class="form-group">
    <label class="text-danger">Non-Qualified</label>
  </div>
</form>

Answer 1

有两个问题：

• 您的代码段不包含<form>，因此您最初的form选择器将不匹配。
• 您缺少第一个:not括号。您需要:not([class*=' text-'])。

最终，您正在寻找label:not([class*=' text-']):not(.control-label)：

body {
  color: #000;
}

.control-label {
  color: blue;
}

.text-danger {
  color: red;
}

label:not([class*=' text-']):not(.control-label) {
  color: #000f1d;
}

<div class="form-group">
  <label class="col-xs-6 col-sm-6 control-label">Sample</label>
</div>
<div class="form-group">
  <label class="col-xs-6 col-sm-6">0.00</label>
</div>
<div class="form-group">
  <label class="text-danger">Non-Qualified</label>
</div>

请注意，此方法比.text-danger选择器具有更高的特异性，因此也会更改“非限定”元素的颜色。如果不希望这样做，只需向该选择器添加更多特异性：

body {
  color: #000;
}

.control-label {
  color: blue;
}

label:not([class*=' text-']):not(.control-label).text-danger {
  color: red;
}

label:not([class*=' text-']):not(.control-label) {
  color: #000f1d;
}

<div class="form-group">
  <label class="col-xs-6 col-sm-6 control-label">Sample</label>
</div>
<div class="form-group">
  <label class="col-xs-6 col-sm-6">0.00</label>
</div>
<div class="form-group">
  <label class="text-danger">Non-Qualified</label>
</div>