Cálculo de la especificidad de un selector
El nivel de prioridad del selector se decide en el Punto de combinación de selectores.
- atributo style = a
- número de atributos de ID en el selector = b
- número de otros atributos y pseudo-clases en el selector = c
- número de nombres de elementos y pseudo-elementos en el selector = d
Por ejemplo, si es una combinación de los siguientes selectores:
[index.html]
<body>
<article>
<p>This is <span id="red">paragraph</span>.</p>
</article>
</body>
[style.css]
article p span{
color: blue;
}
#red{
color: red;
}
"article p span" son "a = 0, b = 0, c = 0, d = 3 (0003)".
"#red" es "a = 0, b = 1, c = 0, d = 0 (0100)".
En este caso, el párrafo se convierte en un caracter rojo. Porque "#red (0100)" es más grande que "article p span (0003)".
Ver también 6.4.3 Calculating a selector's specificity
Ejemplo
[index.html]
<body>
<div id="wrapper">
<header id="top">
<h1>W3C cafe</h1>
<div id="hright">
<nav>
<ul id="gnavi">
<li>menu</li>
<li>location</li>
<li>about us</li>
<li>recruit</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
[style.css]
#wrapper header div nav #gnavi{
list-style-type: none;
}
#top #hright #gnavi{
list-style-type: square;
}
En este caso, los marcadores de la lista se cambian a "square". Porque "#top #hright #gnavi (a = 0, b = 3, c = 0, d = 0)" es más grande que "#wrapper header div nav #gnavi (a = 0, b = 2, c = 0, d = 3) ".
No hay comentarios:
Publicar un comentario