css - 带有 :not 的 CSS 类通配符

Question

我正在使用 [class*='-text']带有变量的文本颜色类的选择器整个规则如下所示：

[class*='-text']{
    --textcolor:inherit ;
    --textalpha: 1;
    color: rgba(var(--textcolor),var(--textalpha)) !important;
}
.red-text{--textcolor: 244,67,54}
.red-text.text-lighter-1{--textcolor: 239,83,80}
.purple-text{--textcolor: 156,39,176}
.purple-text.text-lighter-1{--textcolor: 171,71,188}
.blue-text{--textcolor: 33,150,243}
.blue-text.text-lighter-1{--textcolor: 66,165,245}
.text-alpha-2{--textalpha: 0.2}
.text-alpha-4{--textalpha: 0.4}
.text-alpha-6{--textalpha: 0.6}
.text-alpha-8{--textalpha: 0.8}

现在，当我想排除一些引导类时，.align-text-top或者.align-text-bottom我正在使用选择器作为

[class*='-text']:not(.align-text-top):not(.align-text-bottom)

但这完全取消了通配符规则。任何建议如何从通配符规则中排除这些类？谢谢

Answer 1

解释/建议：

• 使用 CSS 变量，您应该在:root伪类中声明全局变量
  _{来源：MDN - 使用 CSS 自定义属性（变量）}

---

• 第一条<span>规则是针对所有包含属性选择器"align-text"的CSS。*=

• 第二条<span>规则是针对所有包含"align-text"属性选择器的CSS，不包括专门以属性选择器*=结尾的CSS 。_{来源：CSS Tricks - CSS 属性选择器上的 Skinny}"-top""-bottom"$=
  

---

:root {
  --textcolor: 255, 0, 0;
  --textalpha: .5;
}
span[class*="align-text"] {
  color: rgb(var(--textcolor));
}
span[class*="align-text"]:not([class$="-top"]):not([class$="-bottom"]) {
  color: rgba(var(--textcolor),var(--textalpha));
};

<span class="align-text-middle">
  text
</span>
<span class="align-text-top">
  text
</span>
<span class="align-text-bottom">
  text
</span>