Why Selector specificity does not work here?

Consider this code:

<style>
#mainContent p { 	/*Specificity 101*/
	color: red;
}
p {			/*Specificity 1*/
	color:blue;
}
.green {		/*Specificity 10*/
	color:green;
}
</style>

<body>
  <section id="mainContent">
    <p>Paragraph inside section. This is a 
      <strong class="green">short text</strong> nested</p>

Syndicate content