html - Font-size on parents not changing the p children -

this question has answer here:

• mistake in calculating specificity css 5 answers

i read css cascading rules , aware that.

• inline styling : 1000 pts
• id : 100 pts
• class : 10 pts
• element : 1 pts

but turned out weird happens code. when having higher specificity points, style not apply.

here trying replicate problem:

p {    font-size: 10px  }      div.container {    font-size: 30px !important;  }

<div class="container" style="font-size:20px;">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. fuga nesciunt voluptatum eligendi tempora odio nemo delectus adipisci fugiat quasi quam hic pariatur ea beatae voluptas quae quas, blanditiis incidunt quia.</p>  </div>

the p tag don't follow font-size set inline , on css files. when lower in terms of position , higher in terms of specificity points

it turned out not specificity points problem more inheritance , cascading think. glad learned now.

the problem is, setting font-size parents used when font-size not set on target children itself. when not set, cascade parents until founds property of font-size

but when set anywhere earlier in terms of position(low priority) or lower specificity points, won't cascade font-size property.

p {    font-size: 10px  }      div.container {    font-size: 30px !important;  }    .container p {    font-size: 30px;   }

<div class="container" style="font-size:20px;">    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. fuga nesciunt voluptatum eligendi tempora odio nemo delectus adipisci fugiat quasi quam hic pariatur ea beatae voluptas quae quas, blanditiis incidunt quia.</p>  </div>

this 1 works because explicitly set font-size attributes on p tag inside div.container overriding earlier styling set p tags

note that, if remove styling p tag earlier, take font-size of parents