html - sobre - important css
Reglas de anulación de CSS y especificidad (3)
La especificidad se calcula en función de la cantidad de identificadores de ID, clase y etiqueta en su regla. La identificación tiene la mayor especificidad, luego la clase, luego la etiqueta. Su primera regla ahora es más específica que la segunda, ya que ambas tienen un selector de clase, pero la primera también tiene dos selectores de etiquetas.
Para hacer que la segunda anule la primera, puedes hacer más específica agregando información de sus padres:
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
Here hay un buen artículo para obtener más información sobre la prioridad del selector.
A menudo me confunden las reglas de anulación de CSS: en general, me doy cuenta de que las hojas de estilo más específicas anulan las menos específicas y que la especificidad está determinada por la cantidad de selectores especificados. También está la palabra clave !important , que también desempeña un papel.
Entonces, aquí hay un ejemplo simple: tengo una tabla con dos celdas de tabla. La tabla en sí tiene una regla CSS que se aplica a todas las celdas dentro de la tabla. Sin embargo, la segunda celda de la tabla tiene su propia regla que debería reemplazar la regla general de la tabla:
<html>
<head>
<style type = "text/css">
table.rule1 tr td {
background-color: #ff0000;
}
td.rule2 {
background-color: #ffff00;
}
</style>
</head>
<body>
<table class = "rule1">
<tr>
<td>abc</td>
</tr>
<tr>
<td class = "rule2">abc</td>
</tr>
</table>
</body>
</html>
Pero ... cuando abro esto en un navegador, veo que la rule2 no invalida la rule1 . Bien, entonces creo que necesito hacer que la rule2 más "específica", pero realmente no puedo definir ningún otro selector ya que solo quiero aplicarlo a una celda de tabla en particular. Así que, traté de poner el ! important ! important clave ! important , pero eso tampoco funciona.
Puedo anular la rule2 si rule2 el nodo de texto en un <div> , como:
<td class = "rule2"><div>abc</div></td>
... y luego hacer que la regla CSS sea más específica:
td.rule2 div {
background-color: #ffff00; !important
}
Esto funciona, pero no es exactamente lo que quiero. Por un lado, quiero aplicar la regla a la celda de la tabla , no al DIV. Hace una diferencia porque aún puede ver el color de fondo de la rule1 como un borde alrededor de la división.
Entonces, ¿qué debo hacer para decirle a CSS que quiero que la rule2 anule la rule1 para el elemento td ?
Lo importante tiene que estar dentro del;
td.rule2 div { background-color: #ffff00 !important; }
de hecho, creo que esto debería anularlo
td.rule2 { background-color: #ffff00 !important; }
Para dar mayor especificidad a la segunda regla, siempre puede usar partes de la primera regla. En este caso, agregaría table.rule1 tr de la regla uno y lo table.rule1 tr a la regla dos.
table.rule1 tr td {
background-color: #ff0000;
}
table.rule1 tr td.rule2 {
background-color: #ffff00;
}
Después de un tiempo, encuentro que esto se vuelve natural, pero sé que algunas personas no están de acuerdo. Para esas personas sugeriría mirar LESS o SASS .