Tengo una duda sobre especificidad en el siguiente codigo.
Código:
<html>
<head>
<title>Font sizing</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size: 100%;
}
#content {
background: #FFFFCC;
font-size: 2em;
}
p {
font-size: 0.5em;
}
-->
</style>
</head>
<body>
<div id="content">
<p>This is another paragraph of text that is inside a DIV tag with an ID of sidebar. It will be used to show how inheritance can be used when sizing fonts, and how it can allow you to make changes of scale to entire areas without re-writing multiple styles.</p>
</div>
</body>
</html>
Si siguiera las reglas de "especificidad", la propiedad font-size tiene una especifidad de 1,0,0 en el selector "#content", por lo que tendria que sobreescribir el valor definido para esa propiedad en el selector "p" que tiene una especificidad menor 0,0,1.
Con lo cual el texto se deberia ver con un tamaño de 2ems, pero sin embargo lo que sucede es que hace caso omiso a las reglas de especifidad y calcula 0,5ems x 2ems lo que le termina dejando 1em como tamañofinal para el texto.
Mi pregunta es las reglas de especifidad no aplican para el tamaño del texto cuando esta definido en modo relativo, ya sea con ems o con porcentajes?
Saludos.