Cuando se aplica más de un conjunto de reglas CSS al mismo elemento, el navegador tendrá que decidir qué conjunto específico se aplicará al elemento. Las reglas que sigue el navegador se denominan colectivamente Especificidad
Las reglas de especificidad incluyen:
- El estilo CSS aplicado al hacer referencia a una hoja de estilo externa tiene la prioridad más baja y es anulado por el CSS interno y en línea.
- El CSS interno se anula con el CSS en línea.
- El CSS en línea tiene la prioridad más alta y anula todos los demás selectores.
Ejemplo:
html
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
h1 {
background-color: red;
color: white;
}
h2 {
color: blue;
}
</style>
</head>
<body>
<h1>
Internal CSS overrides external CSS
</h1>
<h2 style="color: green;">
Inline CSS overrides internal CSS
</h2>
</body>
</html>
«external.css» del Ejemplo-1:
html
h1{
background-color: lightgreen;
}
h2{
color: pink;
}
Producción:
css interno y externo en línea
Jerarquía de Especificidad: Cada selector de elemento tiene una posición en la Jerarquía.
- Estilo en línea: el estilo en línea tiene la máxima prioridad.
- Identificadores (ID): ID tiene la segunda prioridad más alta.
- Clases, pseudoclases y atributos: Le siguen las clases, pseudoclases y atributos.
- Elementos y pseudoelementos: Los elementos y pseudoelementos tienen la prioridad más baja.
Ejemplo-2:
html
<html>
<head>
<style type="text/css">
h1 {
background-color: red;
color: white;
}
#second {
background-color: black;
color: white;
}
.third {
background-color: pink;
color: blue;
}
#second1 {
color: blue;
}
.third1 {
color: red;
}
</style>
</head>
<body>
<h1 id="second" class="third">
ID has highest priority.
</h1>
<h1>
Element selectors has lowest priority.
</h1>
<h1 class="third">
Classes have higher priority than element selectors.
</h1>
<h2 style="color: green;" id="second1" class="third1">
Inline CSS has highest priority. </h2>
</body>
</html>
Producción:
Jerarquía de especificidad
Nota:
- Cuando dos o más selectores tienen la misma especificidad, el último (más reciente) cuenta.
- Los selectores universales como el cuerpo y los selectores heredados tienen la menor especificidad.
Publicación traducida automáticamente
Artículo escrito por roshalmoraes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA