¿En qué orden se reemplazan las hojas de estilo CSS?

En un encabezado HTML, tengo esto:

 Title   

styles.css es mi hoja específica de la página. master.css es 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 los 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 a hojas de estilo que en funciones CSS típicas? ¿Quiere decir que la última línea es la que se muestra?

Las reglas para la creación de casillas de reglas de 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: reglas más específicas anulan las más generales. La especificidad se define según la cantidad de ID, clases y nombres de elementos involucrados, así como también si se utilizó la statement !important . Cuando existen varias reglas del mismo “nivel de especificidad”, cualquiera que aparezca último gana.

El estilo más específico se aplica:

 div#foo { color: blue; /* This one is applied to 
*/ } 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 
*/ }

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

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

 
Hello World!!

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

La última carga de CSS es THE MASTER, que anulará todas las CSS con la misma configuración CSS

Ejemplo:

     

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;

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 debe cargar su restablecimiento general, luego la página específica. Entonces, si aún no está viendo el efecto deseado, debe analizar la especificidad de los selectores involucrados, como otros ya han señalado.

Tratemos de simplificar la regla de conexión en cascada con un ejemplo. Las reglas son más específicas para general.

  1. Aplica la regla de la ID primero (sobre clase y / o elementos independientemente del orden)
  2. Aplica clases sobre elementos independientemente de la orden
  3. Si no hay clase o id, aplica los generics
  4. Aplica el último estilo en el orden (orden de statement según el orden de carga del archivo) para el mismo grupo / nivel.

Aquí está el código css y html;

  

Aquí está el estilo css

  

Houston Chronicle News

Latest Developments in your city

Next section

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

El elemento

contiene el elemento

, sin embargo, el último estilo declarado tendrá efecto, en este caso el article h2 { .. } en el tercer elemento h2.

Aquí está el resultado en IE11: (No hay suficientes derechos para publicar imágenes) DarkBlue: Houston Chronicle News, DarkGreen: Últimos desarrollos en su ciudad, Púrpura: Sección de anuncios locales de Houston, Negro: Siguiente sección

enter image description here

La mejor manera es usar clases tanto como sea posible. Evite los selectores de ID (#) de todos modos. Cuando escribe selectores con solo clases individuales, la herencia CSS es mucho más fácil de seguir.

Actualización: lea más sobre la especificidad de CSS en este artículo: https://css-tricks.com/specifics-on-css-specificity/

Sospecho por su pregunta que tiene selecciones duplicadas, un conjunto maestro, que va para 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 subsiguiente 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 de front-end, esta página resolvió muchas preguntas.

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

¡Cargar orden importa!

   

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

Lo mejor es poner todas las reglas en una hoja (y minificarlas) antes de implementarlas.

    Intereting Posts