Question

考虑遵循HTML和CSS：

我将第二个元素背景设置为红色，并带有内联样式。如何用背景设置元素样式：红色？我知道我可以这样做：nth-child（2），但每次都是动态不同的？

<div class="titleBox">
    <button>Click meh!</button>
</div>
<div class="titleBox" style="background:red">
    <button>Click meh!</button>
</div>
<div class="titleBox">
    <button>Click meh!</button>
</div>

.titleBox {
    width:200px;
    height:200px;
    float:left;
    border:1px solid;
    opacity:.5
}

所以..如果style =“background：red”，则使不透明度等于1

谢谢！ http://jsfiddle.net/kM27C/

Answer 1

只需检查属性是否存在

在IE中无法正常工作，但只要检查样式属性是否存在就可以了：

.titleBox[style] {

完全匹配的属性选择器

使用属性选择器：

.titleBox[style="background:red"] {

演示小提琴（http://jsfiddle.net/Empgz/）适用于Chrome，但不适用于IE。显然，IE解析了样式，添加了一些格式，然后要求选择器遵循该格式。我检查了元素，看到style="background: red;"（带空格和分号），所以我尝试了这个，在IE中有效：

.titleBox[style="background: red;"] {

因此，您可以将两者都添加到CSS中，因此它匹配任何：

.titleBox[style="background:red"],
.titleBox[style="background: red;"] /* For IE */ {
  /* properties go here */
}

当然，这很脏，但如果你不能改变HTML，你有时候必须做这样的事情。如果可以更改HTML，请删除内联样式并为类更改。

更多特殊属性选择器（以开头或包含）

还有^=运算符，您可以使用该运算符检查属性是否以值开头：

/* Any background setting */
.titleBox[style^=background] {
    opacity:1;
}

演示：http://jsfiddle.net/g7SZ5/1/

有关更多此类运营商的信息，请参阅CSS-tricks.com上的The Skinny on CSS Attribute Selectors。

如果使用背景内联样式，请使用CSS来设置样式元素

1 个答案: