说明/建议：

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 - Using CSS custom properties (variables)}

第一个<span>规则将使用"align-text"属性选择器定位包含*=的所有CSS。
第二条<span>规则将所有包含"align-text"且包含*=属性选择器的CSS定位为目标，但不包括那些以"-top"和{{1 }}和"-bottom"属性选择器。
_{来源：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));
};

CSS类通配符：: not

1 个答案:

说明/建议：