CSS !important not working

Question

I have the following code and for some reason the !important qualifier isn\'t working.

        
                      

              相关标签:
       
      

Answer 1

A good subject to read up on is CSS Specificity

1. p has a specificity of 1 (1 HTML selector)
2. div p has a specificity of 2 (2 HTML selectors, 1+1)
3. .tree has a specificity of 10 (1 class selector)
4. div p.tree has a specificity of 12 (2 HTML selectors + a class selector, 1+1+10)
5. #baobab has a specificity of 100 (1 id selector)
6. body #content .alternative p has a specificity of 112 (HTML selector + id selector + class selector + HTML selector, 1+100+10+1)

Answer 2

Give the <div> an id and then add this rule to your CSS stylesheet (or in a <style> tag if you don't want to change the style sheet):

#your_div_id span {
    font-family : calibri; font-size: 20pt !important;
}

!important in CSS allows the author to override inline styles (since they have a higher precedence than style sheet styles normally). It doesn't automatically make the style marked !important override everything else.

SEE: The W3C's documentation on CSS Selector Specificity.
Felix's Demo of the markup