CSS-Specifity and CSS Inheritance (concrete question)?

Question

Hello,

i would by thankful for an official link (and section) of the specification for CSS, that explains if:

.one two h1 {color:green;font-family:arial;}  /*case 1 */
.one two h1 {color:blue;}   /*case 2*/

will result in (when evaluated by the browser)

.one two h1 {color:blue;font-family:arial;}  /*case 3*/

or will it be:

.one two h1 {color:blue;}  /*case 4*/

==>I have read a lot about inheritance, specifity, cascading etc but I still have not found for the given example which rules apply here.

In regard to specifity, both elements are equal in specifity: However the case2 will "win" as it is equal specific but the last(!!) one declared (=most specific). But does specifity always apply to the whole selector with ALL properties defined. Or only to the properties that are in "competition" (and declared in both).

thanks!!!!

Answer 1

It will be:

.one two h1 {color:blue;font-family:arial;}  /*case 3*/

The later rules override previous CSS properties one by one.

Answer 2

See this video

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css-specificity/

Answer 3

It will be .one two h1 {color:blue;font-family:arial;} /*case 3*/

http://www.w3.org/TR/CSS2/cascade.html#cascading-order

"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. "