【问题标题】：CSS class wild card with :not带 :not 的 CSS 类通配符
【发布时间】：2018-08-22 21:09:21
【问题描述】：

我正在使用[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)

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

【问题讨论】：

你确定颜色声明是好的，我很确定它不会像这样工作......你不能使用继承作为rgba的值
选择器很好 jsfiddle.net/7cnm9uhf/1 所以问题是我说的颜色，它是错误的
同样在你编辑之后，你不能在rgba()函数中使用inherit
正如@ItayGanor 和其他人所说，您的color 声明是错误的。
继承可能是错误的，但如果没有像 red-text 这样具有 .red-text{--textcolor: 244,67,54}

标签： css wildcard

【解决方案1】：

解释/建议：

使用 CSS 变量，您应该在 :root 伪类中声明全局变量
_{来源：MDN - Using CSS custom properties (variables)}

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

: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>

【讨论】：

我的回答不再反映OP的原始问题，但当时确实回答了最初的问题。