CSS属性选择器无法正确选中目标HTML元素问题求助

你的CSS选择器写法有误，导致无法匹配目标元素：

• 你写的 p [class = "test_class"] 是后代属性选择器，作用是匹配p标签内部所有带有class="test_class"属性的子元素，而非本身带该class的p标签，这就是为什么把class移到p内的span上才生效的原因。

正确的写法有两种： #

1. 元素+类选择器（推荐，兼容性好且灵活）

这种写法会匹配所有带有test_class类的p元素，即使p还有其他类也能生效：

p.test_class { color: red; }

2. 元素+属性选择器（无空格）

去掉p和属性选择器之间的空格，就会匹配自身带有class="test_class"属性的p元素：

p[class="test_class"] { color: red; }

注意：这种写法是完全匹配class属性的完整值，如果p元素有多个类（比如<p class="test_class another">），该选择器会失效，因此更推荐第一种写法。

修改后测试效果 #

把CSS文件内容替换成上面任意一种写法，刷新页面后，第二个p标签的文本就会变成红色。

内容的提问来源于stack exchange，提问作者Santiago Mayo