¿En qué orden anulan las hojas de estilo CSS?

157

En un encabezado HTML, tengo esto:

<head>
<title>Title</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

styles.csses mi hoja de página específica. master.csses una hoja que uso en cada uno de mis proyectos para anular los valores predeterminados del navegador. ¿Cuál de estas hojas de estilo tiene prioridad? Ejemplo: la primera hoja contiene información específica

body { margin:10px; }

Y bordes asociados, pero el segundo contiene mis restablecimientos de 

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

En esencia, ¿el elemento en cascada de CSS funciona igual en términos de referencias de hoja de estilo que en las funciones típicas de CSS? ¿Significa que la última línea es la que se muestra?

css overriding stylesheet ian5v
fuente
Me acabo de dar cuenta de que esto sería más adecuado para los webmasters. ¿Habría un mejor lugar para publicar esto?
ian5v
10
Aquí está bien.
Licuadora
44
body:not(input="button")No es un selector válido por cierto. Probablemente quisiste dividirlo en body, input:not([type="button"]).
BoltClock
Eso es interesante. No creo haber visto tal sintaxis antes. Todavía soy nuevo, pero esos dobles corchetes son extraños para mí.
ian5v
esos corchetes son para los selectores de atributos: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors @topic: probablemente desee cambiar el orden de las hojas de estilo: su general master.cssdebería cargar primero, luego es mucho más fácil anular los estilos maestros en tu styles.css.
grilly

Respuestas:

163

Las reglas para la cascada de reglas CSS son complejas: en lugar de tratar de parafrasearlas mal, simplemente lo referiré a la especificación:

http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

En resumen: las reglas más específicas anulan las más generales. La especificidad se define en función de la cantidad de ID, clases y nombres de elementos involucrados, así como de si !importantse utilizó la declaración. Cuando existen varias reglas del mismo "nivel de especificidad", gana la que aparezca la última.

duskwuff -inactive-
fuente
1
Entonces, ¿no hay una regla específica sobre el orden de carga de las hojas de estilo? Entiendo cómo se muestra CSS en términos de especificidad, pero luego asumiré que mi hoja maestra se cargará a menos que se anule.
ian5v
11
En realidad, !importantparticipa directamente en la cascada y no tiene nada que ver con la especificidad. La especificidad está relacionada con los selectores, mientras que !importantse usa con declaraciones de propiedades. (¡Entonces tiene razón al decir que las reglas son complejas!;)
BoltClock
2
Entonces, ¿las hojas de estilo se cargan de la misma manera que los elementos, teniendo prioridad la última si tienen la misma especificidad?
ian5v
3
@iananananan: Básicamente, el navegador nunca ve CSS en términos de hojas de estilo individuales. Si hay varias hojas de estilo, todas se tratan como si fueran una hoja de estilo gigante, y las reglas se evalúan en consecuencia.
BoltClock
2
@ user34660 El comentario de BoltClock es desde la perspectiva del estilo CSS. Tienes razón en que las hojas de estilo se mantienen separadas en el DOM, pero esa separación no afecta cómo se aplican esos estilos a nada.
duskwuff -inactive-
31

Se aplica el estilo más específico:

div#foo {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

div {
  color: red;
}

Si todos los selectores tienen la misma especificidad, se utiliza la declinación más reciente:

div {
  color: red;
}

div {
  color: blue; /* This one is applied to <div id="foo"></div> */
}

En su caso, body:not([input="button"])es más específico por lo que se utilizan sus estilos.

Licuadora
fuente
1
Vea mi comentario sobre la pregunta con respecto a ese último selector.
BoltClock
1
¡La regla de especificidad hace las cosas más difíciles cuando necesitamos anular la hoja de estilo no editable!
Ari
23

El orden sí importa. Se tomará el último valor declarado de ocurrencia múltiple. Por favor vea el mismo que resolví : http://jsfiddle.net/Wtk67/

<div class="test">Hello World!!</div>


<style>
    .test{
        color:blue;
    }

    .test{
        color:red;
    }
</style>

Si intercambias el orden de .test{}, entonces puedes ver que el HTML toma el valor del último declarado en CSS

Roy MJ
fuente
3
Por lo tanto, debe agregar el CSS más específico al final.
live-love
17

El último CSS cargado es THE MASTER, que anulará todos los CSS con la misma configuración de CSS

Ejemplo:

<head>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/master.css">
</head>

reset.css

h1 {
    font-size: 20px;
}

master.css

h1 {
    font-size: 30px;
}

La salida para la etiqueta h1 será de tamaño de fuente: 30px;

Doodl
fuente
1
Hola. En mi caso, el primero definido .cssse carga en último lugar. ¿Se aplican por orden de carga o por definición?
Eugen Konkov
Gracias, esta es exactamente la explicación que estaba buscando.
HunterTheGatherer
7

Tratemos de simplificar la regla en cascada con un ejemplo. Las reglas van más específicas al general.

  1. Aplica la regla del ID primero (sobre la clase y / o elementos, independientemente del orden)
  2. Aplica clases sobre elementos independientemente del orden
  3. Si no hay clase o id, se aplican los genéricos.
  4. Aplica el último estilo en el orden (orden de declaración basado en el orden de carga de archivos) para el mismo grupo / nivel.

Aquí está el código CSS y HTML;

<style>
    h2{
        color:darkblue;
    }
    #important{
        color:darkgreen;
    }
    .headline {
        color:red;
    }
    article {
        color:black;
        font-style:italic;
    }
    aside h2 {
        font-style:italic;
        color:darkorange;
    }
    article h2 {
        font-style: normal;
        color: purple;
    }
</style>

Aquí está el estilo CSS

<body>
<section>
    <div>
        <h2>Houston Chronicle News</h2>
        <article>
            <h2 class="headline" id="important">Latest Developments in your city</h2>
            <aside>
                <h2>Houston Local Advertisement Section</h2>
            </aside>
        </article>
    </div>

    <p>Next section</p>
</section>

Aquí está el resultado. No importa el orden de los archivos de estilo o la declaración de estilo, se id="important"aplica al final (tenga en cuenta el class="deadline"último declarado pero no tiene ningún efecto).

El <article>elemento contiene un <aside>elemento, sin embargo, el último estilo declarado tendrá efecto, en este caso article h2 { .. } en el tercer elemento h2.

Aquí está el resultado en IE11: (No hay suficientes derechos para publicar la imagen) DarkBlue: Houston Chronicle News, DarkGreen: Últimos desarrollos en su ciudad, Purple: Sección de publicidad local de Houston, Black: Siguiente sección

ingrese la descripción de la imagen aquí

Kagan Agun
fuente
6

Depende tanto del orden de carga como de la especificidad de las reglas reales aplicadas a cada estilo. Dado el contexto de su pregunta, primero desea cargar su reinicio general, luego la página específica. Luego, si aún no está viendo el efecto deseado, debe analizar la especificidad de los selectores involucrados, como ya lo han señalado otros.

prodigitalson
fuente
2

EDITAR: abril de 2020, según el comentario de @ LeeC, este ya no es el caso

Sí, funciona igual que si estuvieran en una hoja, sin embargo:

¡El orden de carga importa!

<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href="master.css" rel="stylesheet" type="text/css"/>

En el código anterior, no hay garantía de que master.cssse cargue después styles.css. Por lo tanto, si master.cssse carga rápidamente y styles.csstarda un tiempo, styles.cssse convertirá en la segunda hoja de estilo y master.cssse sobrescribirá cualquier regla de la misma especificidad .

Lo mejor es poner todas sus reglas en una hoja (y minimizar) antes de implementar.

mella
fuente
Considere el caso de hojas de estilo alternativas casi idénticas cargadas desde la sección <head> de una página, una que contiene atributos de medios condicionales para cargar una hoja de estilo específica para teléfonos inteligentes y tabletas. En este caso, la lógica especificada en los medios debe ser estrictamente exclusiva para cada hoja de estilo si el orden de carga es indeterminado.
Lindsay Haisley
@n_i_c_k Su respuesta es incorrecta. El orden de declaración es lo que importa, no el orden de carga . Acabo de probar esto con Fiddler, deteniendo la descarga master.cssy dejando que se styles.csscargue por completo. Entonces, dejo master.csscargar. El estilo "superpuesto" master.cssaún se aplicaba, y la representación se bloqueó hasta que se master.csscargó y se analizó. Nota : probé rel=preloaden master.css' (no halting) and that apparently alters its _declaration_ order by hoisting it above styles.css`.
LeeC
Gracias @LeeC, sé que en el momento de escribir mi respuesta era correcta, pero aceptaré su palabra de que ya se ha solucionado y editaré mi respuesta.
n_i_c_k
0

Sospecho por su pregunta que tiene selecciones duplicadas, un conjunto maestro, que se aplica a todas las páginas, y un conjunto más específico que desea anular los valores maestros para cada página individual. Si ese es el caso, entonces su orden es correcta. El Master se carga primero y las reglas en el archivo posterior tendrán prioridad (si son idénticas o tienen el mismo peso). Hay una descripción muy recomendada de todas las reglas en este sitio web http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ Cuando comencé con el desarrollo front-end, esta página despejó tantas preguntas.

usuario3094826
fuente
0

Es la cascada que define la precedencia de las declaraciones. Puedo recomendar la especificación oficial; esta parte es bien legible.

https://www.w3.org/TR/css-cascade-3/#cascading

Los siguientes tienen un efecto en la ordenación, en orden descendente de prioridad.

  1. Una combinación de origen e importancia:

    1. Transition declaraciones
    2. Declaraciones del agente de usuario marcadas con !important
    3. Declaraciones del usuario marcadas con !important
    4. Declaraciones del autor de la página marcadas con !important
      1. Definiciones sobre el elemento con styleatributo
      2. Definiciones de todo el documento
    5. Animation declaraciones
    6. Declaraciones del autor de la página
      1. Definiciones sobre el elemento con styleatributo
      2. Definiciones de todo el documento
    7. Declaraciones del usuario
    8. Declaraciones de agente de usuario

  2. Si dos declaraciones tienen el mismo origen e importancia , entra en juego la especificidad, es decir , qué tan claramente se define el elemento, calculando una puntuación.

    • 100 puntos por cada identificador ( #x34y)
    • 10 puntos por cada clase ( .level)
    • 1 punto por cada tipo de elemento ( li)
    • 1 punto por cada pseudo-elemento ( :hover) excluyendo:not

    Por ejemplo, el selector main li + .red.red:not(:active) p > *tiene una especificidad de 24.

  3. El orden de aparición solo juega un papel si dos definiciones tienen el mismo origen, importancia y especificidad. Las definiciones posteriores preceden a las definiciones anteriores en el documento (incluidas las importaciones).

Michael Schmid
fuente
0

Creo que al ejecutar el código, se lee de arriba a abajo, lo que significa que el último enlace CSS anularía los estilos similares en cualquier hoja de estilo que se encuentre encima.

Por ejemplo, si creó dos hojas de estilo 

<link rel="stylesheet" href="style1.css"> 
<link rel="stylesheet" href="style2.css">

y en ambos, establece el color de fondo del cuerpo en dos colores diferentes: el color del cuerpo en style2.css tendría prioridad.

Puede evitar el problema de prioridad de estilo utilizando !IMPORTANTdentro del estilo de clase que le gustaría tener prioridad, o posiblemente reorganizando su <link>pedido.

Ennam Hoque
fuente