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

考虑以下HTML和CSS：

我有第二个元素背景设置为红色与内联样式。如何使用背景设置元素的样式：红色？我知道我能做到：第N个孩子（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
}

点击我！
点击我！
点击我！
.标题栏{
宽度：200px；
高度：200px；
浮动：左；
边框：1px实心；
不透明度：.5
}

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

---

谢谢

只需检查属性是否存在

在IE中无法正常工作，但如果您只检查样式属性是否存在，则会正常工作：

.titleBox[style] {

精确匹配属性选择器

使用属性选择器：

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

Demo fiddle（）适用于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，请删除内联样式并为类更改它

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

还有

^=

操作符，使用它可以检查属性是否以值开头：

演示：

---

请参见CSS-tricks.com上的更多此类运算符。

只需检查属性是否存在

在IE中无法正常工作，但如果您只检查样式属性是否存在，则会正常工作：

.titleBox[style] {

精确匹配属性选择器

使用属性选择器：

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

Demo fiddle（）适用于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，请删除内联样式并为类更改它

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

还有

^=

操作符，使用它可以检查属性是否以值开头：

演示：

---

有关此类运算符的更多信息，请参见CSS-tricks.com上的内容。

是否使用属性选择器

.titleBox[style*=“background”]

。。您最好尝试通过JavaScript进行检查。如果可以通过简单的CSS进行检查，JavaScript几乎不会更好。使用属性选择器

.titleBox[style*=“background”]

。。您最好尝试通过JavaScript进行检查。如果可以通过简单的CSS进行检查，JavaScript几乎没有更好的效果。我无法按照我的意愿进行检查。。我需要所有3个都有不透明度1，因为他们有背景色我不能让这工作，我想它。。我需要所有3个都有不透明度1，因为它们有背景色