CSS Question - Specificity and Intervention

Question

Why is the following code world blue and not red?

Specificity .my_classis equal 0,0,1,0, but inherits a color #my_idwhose value is higher ( 0,1,0,0).

HTML:

<p id='my_id'>
    Hello
    <span class='my_class'>
        world
    </span>
</p>

CSS

#my_id {
    color: red;
}

.my_class {
    color: blue;
}

Answer 1

See: w3c: 6 Assigning property values, cascading, and inheritance - 6.2 Inheritance

An inherited value takes effect on an element only if no other style declaration has been applied directly to the element.

This style applies to an element with id="my_id":

#my_id {
    color: red;
}

... () , class="my_class", color .

... :

.my_class {
    color: blue;
}

Answer 2

. , iiuc , .

, span , <p> "" . , .

, , .

, . <span> , . , :

#my_id span {color: orange}

, "" - , .

Answer 3

. , .

: http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 4

, , , , , ( , ).