如果背景为内联样式，请使用CSS样式元素

Question

consider following HTML and CSS:

I have the second element background set to red with inline styling. How can I style the element with the background:red? I know I can do :nth-child(2), but it is dynamicly different each time?

<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
}

So.. if style="background:red", make the opacity equal 1

thanks! http://jsfiddle.net/kM27C/

Answer 1

Just check whether the attribute exists

Doesn't work properly in IE, but it does if you just check for the existence of the style attribute:

.titleBox[style] {

Exact matching attribute selector

Use the attribute selector:

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

Demo-fiddle ( http://jsfiddle.net/Empgz/ ) works fine for Chrome, but not for IE. Apparently IE parsed the style, adds some formatting, and then requires the selector to follow that formatting. I inspected the element, saw style="background: red;" (with space and semi-colon), so I tried this, which works in IE:

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

So, you could add both to your CSS, so it matches any:

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

It's dirty, of course, but if you cannot change the HTML, you'll sometimes have to do something like this. If you can change your HTML, remove the inline style and change it for a class.

More special attribute selector ( starting with or contains )

There is also the ^= operator, using which you can check whether an attribute starts with a value:

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

Demo: http://jsfiddle.net/g7SZ5/1/

See also The Skinny on CSS Attribute Selectors on CSS-tricks.com for more of such operators.