Question

我尝试选择红色段落并对其应用边框。为什么这段代码不起作用？

p[color="red"] {
      border: 1px solid black;
}

<p style="color: green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: yellow;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: lime;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: darkgray;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: cyan;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p style="color: indigo;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>

我错过了什么吗？

小提琴：https://jsfiddle.net/kLx1gcq0/

Answer 1

[]是属性选择器，因此您必须选择style属性，如：

p[style*="color: red"] {
  border: 1px solid black;
}

JSFiddle Demo
如果属性包含指定的字符串，*=将选择该元素。关于CSS选择器的优秀文章可以be found here。

这有效，但只有在有空格的情况下才有效。如果你不知道它是否有空格，你可以这样做：

p[style*="color: red"],
p[style*="color:red"] {
  border: 1px solid black;
}

Answer 2

选择器p[color="red"]无效，因为该元素没有color属性。由于您尝试根据style属性进行匹配，因此您的选择器可能是：

Example Here

p[style="color: red;"] {
  border: 1px solid black;
}

然而，值得一提的是，这将与属性的值完全匹配，因此它可能不会一直有效。您可以根据值是否包含 color: red来匹配：

p[style*="color: red"] {
  border: 1px solid black;
}

但是，如果空格不同或值为background-color: red，则可能无效。当然你可以选择所有不同的变种，但如果可以，我强烈建议避免像这样使用属性选择器。类更适合这类事情。

Answer 3

它不起作用，因为 color 不是HTML属性，这是[color=...]匹配的内容。

通常，不推荐使用内联样式。您应该使用CSS进行样式设置，通常的做法是使用类。

请改为尝试：

＆＃13;

p.red {
      color: red;
      border: 1px solid black;
}
p.green {
      color: green;
}
p.yellow {
      color: yellow;
}
p.lime {
      color: lime;
}

＆＃13;

<p class="green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="yellow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="lime">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>
<p class="red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, provident, nam, et, consectetur molestiae aspernatur ratione placeat dignissimos odio cum non eveniet adipisci voluptas doloribus fugiat maiores odit sint repellat.</p>

＆＃13;

Answer 4

属性选择器用于标识HTML属性，而不是CSS属性。以下可能有效~~（未经测试）~~：

＆＃13;

p[style*="color: red;"] {
  border: 1px solid black;
}

＆＃13;

<p style="color: green;">Green text</p>
<p style="color: yellow;">Yellow text</p>
<p style="color: lime;">Lime text</p>
<p style="color: darkgray;">Dark gray text</p>
<p style="color: red;">Red text</p>
<p style="color: cyan;">Cyan text</p>
<p style="color: indigo;">Indigo text</p>

＆＃13;

Answer 5

选择器错误。 p [color =＆＃34; red＆＃34;]表示＆＃34; P元素具有属性＆＃34; color＆＃34;值为＆＃34;红色＆＃34; ...但你有＆＃34; style＆＃34;属性，而不是＆＃34;颜色＆＃34;。

看看css选择器：http://www.w3.org/TR/css3-selectors/#selectors

Answer 6

是的，这么简单的错误。显然，颜色不是html属性。

工作解决方案：

p[style*="color"][style*="red"] {
  border: 1px solid black;
}   

p[style*="color: red"],
p[style*="color:red"] {
  border: 1px solid black;
}

特别感谢 Jacob Gray

CSS属性选择器不起作用

6 个答案: