Importancia de la jerarquía de hojas de estilo css

Question

He realizado algunas búsquedas en Google y hasta ahora no he encontrado nada que responda a mi pregunta sobre el orden o importancia de CSS.

Por ejemplo, la línea sobrescribe las externas. Lo tengo. Agregar externamente importante puede anular en línea. Además, de todo lo que me han enseñado, los estilos posteriores anulan los estilos anteriores. Entonces:

h1 { font-size: 12pt; } 
h1 { font-size: 14pt; } 

obtendría un tamaño de fuente de 14pt. Pero este no es siempre el caso. A veces quiero definir estilos como:

<div id="content"> 
    <input class="regular" type="text" /> 
    <input class="regular" type="text" /> 
    <input class="long" type="text" /> 

y luego en css:

#content input { width: 50%; } 
.long { width: 75%; } 

pero eso no siempre funciona. ¿Dónde puedo ver el orden de importancia, porque todos ellos tienen niveles de importancia específicos:!

input {} 
#content input {} 
#content input.regular {} 
#content input.long 
input.regular {} 
input.long {} 
.regular {} 
.long {} 

Realmente no me gusta tener que escribir siempre importante, pero si no puedo averiguar el orden de importancia en concreto, a continuación, a veces tengo que cambiar los identificadores, clases, etc.

Answer 1

El término que desea buscar es “especificidad”.

Cuando tiene dos (o más) bloques CSS cuyos selectores seleccionan el mismo elemento y ambos intentan establecer la misma propiedad, entonces el bloque con el selector más específico gana.

El CSS 3 selectores spec detalles de cómo se debe calcular la especificidad, y es razonablemente legible:

• http://www.w3.org/TR/css3-selectors/#specificity

Hay también algunas buenas entradas de blog que describen las reglas demasiado:

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity

(Tenga en cuenta que cuando los dos bloques tienen selectores con el mismo especificidad, sólo entonces qué ganar el gobierno de la cuadra después a cabo, como en el ejemplo, con h1 s. Una regla en un bloque con un selector más específico anulará una regla un bloque posterior con un selector menos específico.)

Answer 2

para este caso aquí es lo que haces

#content input { width: 50%; } 
#content .long { width: 75%; } 

seleccionar un elemento con su identificación tendrá prioridad, por lo tanto, que tenía ese problema en particular. añadiendo el ID a la selección y ser más específico va a resolver el problema

por ejemplo:

#content input.long { width: 75%; } 

es aún más específico que

#content .long { width: 75%; } 

Answer 3

Usted está experimentando la especificidad de CSS. Si tiene dos estilos conflictivos que se aplican al mismo elemento, existe un sistema de ponderación que determina qué estilo gana. Puede leer más sobre esto aquí:

http://css-tricks.com/specifics-on-css-specificity/