How do browsers resolve conflicting classes?

I know it's possible to specify multiple classes on an element in HTML:

<div class='one two'>Text</div>

It seems like classes are accessible from Javascript as a single string.

What happens when the classes are specified with conflicting properties? For instance

div.one {
  background-color: red; 
  color: blue;
}
div.two {
  background-color: green;
}

Will the result depend on the order the classes are specified in? For instance could I reasonably expect the div above to appear wit开发者_如何转开发h blue text and a green background, because the two class becomes evaluated second, overwriting the background-color property?

---

Read about specificity:

• Simple explanation
• More in depth explanation

Short answer: if two selectors have the same specificity, the last one to be declared wins.

---

CSS has a very well defined order of precedence.

In instances like this, where all else is the same and the precedence is equal, the browser should pick the style defined last in the stylesheets.

In the example you've given, this would mean that the div.two styles would override div.one, where the same property is defined in both.

By the way, this is also the same feature that allows you to do define multiple styles with the same property in the same selector, to support different browser features. For example, some browsers may not support rgba colours, so you can do the following:

.myclass {
    background: rgb(200, 54, 54);
    background: rgba(200, 54, 54, 0.5);
}

All browsers will pick the last background declaration that they support, so browsers which support rgba will pick the second one, while browsers that don't, will make do with the first one.

It is also the reason why, when you use vendor prefixed styles, you should also specify the non-prefixed version after the prefixed version(s), so that when that vendor's browser does start supporting the non-prefixed version of the style, you can be sure it'll use it rather than the prefixed version (which may not support all the features of the final version).

---

If the selectors have the same level of precedence (as they do here), whichever is specified later takes precedence. In this case, the background should be green, but the font color blue.

From the CSS spec:

Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

---

What you are using to style these are called "cascading style sheets". The cascading part means that it's like a waterfall and future rules build on (or overwrite) previous ones. Thus the second rule will overwrite the background-color property but it will still retain the font color.

(be careful with precedence though. a rule that goes off of an id has higher priority over one that goes off of a class regardless of where they are placed.)

---

http://jsfiddle.net/mrtsherman/2NpXS/

Depends on order of stylesheet. Later style declarations take precedence. You can invert the two css lines to see.

---

The result depend on the order the classes are specified in.

Here's a good write-up on the order in which CSS rules are executed: http://htmlhelp.com/reference/css/structure.html