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

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 中不能正常工作，但如果你只是检查 style 属性的存在，它就可以：

.titleBox[style] {

完全匹配的属性选择器

使用属性选择器：

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

Demo-fiddle (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。