css3 属性选择器 语法不生效

Question

对css3的属性选择器写法不是很熟，这是去 W3C 找的写法并运用到我的代码中，但是毫无效果，class中前缀为 pc- 的对该代码一点反应都没有，特来求助各位大神这是效果图

Answer 1

^= 是以 xx 开头的意思吧，这样用就好了

[class*="pc"] { 
 display: none;
}

Answer 2

不是没有生效, 是因为选择器并没有匹配到目标节点.

[class^="pc-"] 匹配的是 class 属性值以 pc- 开头的, 但是你截图中的目标节点的 class 属性的值是 callapse pc-header, 很明显这个属性值并不是以 pc- 开头的.

可以把目标节点的 class 属性值改为 pc-header callapse, 这样 [class^="pc-"] 选择器就可以匹配到该节点了.

如果不更改目标节点 class 属性, 使用 [class*="pc-"] 也可以匹配到, 但是这个选择器匹配范围太广, 不太推荐使用.