css3 属性选择器语法不生效

玖伍贰柒

16523754

发布于
2017-08-08

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

这是效果图

css css3 media

阅读 8.2k

10 个回答

熊D01001

✓ 已被采纳

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

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

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

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

某熊猫桑

16.1k61547

发布于
2017-08-08

把引号去掉试试看。

fish

4k74879

发布于
2017-08-08

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

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

xiaopengji

6411719

发布于
2017-08-08

[class^="pc"] {
display: none;
};试一试看。

陈平安

30294966

发布于
2017-08-08

建议用class 的*=

CSS3中新增了3个选择器：
E[attr^="value"]——属性值以value开头
E[attr$="value"]——属性值以value结尾
E[attr*="value"]——属性值包含value

Oopspw

541612

发布于
2017-08-09

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

杰克船长

2699

发布于
2017-08-10

亲自试了一下，[class^='..']不生效的根本原因是，里面是'class'。如果用其他的，比如[src^='...']，是没问题的。

Raymond

4.3k42863

发布于
2017-08-10

测试你的选择器写法是完全准确无误的:

<!DOCTYPE html>
<html>
<head>
<style> 
[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

</body>
</html>

那么你的问题可能出现在 @media ;

你试试把 max-width 与 min-widh 交换下位置