背景

在项目中要隐藏公共组件的某些样式，
而对应标签className为css.module样式（class=’comp-element-list___1lBTC’），并且没有提供禁用对应功能的api，那我们该怎么做呢？

实现方案

第一时间考虑属性选择器是否可以使用，查阅mdn之后，发现，属性选择器可以使用正则匹配形式 属性选择器 - CSS（层叠样式表） | MDN (mozilla.org)

最终通过如下方式实现需求

1
2
3
4
// class*,中*表示class包含"comp-element-list"
div[class*="comp-element-list"] {
  display: none;
}

属性选择器

CSS 属性选择器匹配那些具有特定属性或属性值的元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 存在 title 属性的 <a> 元素 */
a[title] {
  color: purple;
}

/* 存在 href 属性并且属性值匹配"https://example.org"的 <a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在 href 属性并且属性值包含"example"的 <a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在 href 属性并且属性值结尾是".org"的 <a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在 class 属性并且属性值包含单词"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[attr]
表示带有以 attr 命名的属性的元素。

[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。

[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（- 为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN、zh-TW 可以用 zh 作为 value）。

[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

[attr*=value]
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[attr operator value s] 实验性
在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。