media - css3 属性选择器 语法不生效

问题描述

问 题

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

这是效果图

解决方案

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

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

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

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

这篇关于media - css3 属性选择器 语法不生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！