CSS precedencia gobierna

Question

Mi entendimiento es que hay 3 tipos de hoja de estilo:

• definido por el autor de la página
• definido por el usuario (es decir, un conjunto de estilos por defecto definido por el usuario y se instale en su navegador)
• de estilo por defecto definido por el navegador

Según this book si un elemento no se corresponde con un selector en cualquiera de estas hojas de estilo, sólo entonces los p el valor de propiedad se hereda de los elementos principales. Sin embargo, el libro también dice que la hoja de estilo predeterminada de un navegador debe definir un estilo para todos los tipos de elementos.

Si la hoja de estilo de un navegador define un estilo para todos los tipos de elemento, y este estilo tiene una precendencia mayor que la herencia, los valores de propiedad heredados nunca se deben observar. Claramente, este no es el caso, entonces, ¿cuáles son exactamente las reglas de precedencia correctas para las propiedades definidas en la hoja de estilo predeterminada del navegador y las definidas para los elementos principales? (Soy consciente de que no todas las propiedades CSS heredan, pero por el bien de esta discusión supongo que me refiero a una propiedad que es, por ejemplo, color)

Gracias de antemano, Don

Answer 1

El navegador no define un estilo para todos los elementos, solo algunos.Un simplificada de estilo navegador interno podría tener este aspecto:

a { color: blue; border-bottom: 1px solid blue } 
p { margin-bottom: 1em; } 
blockquote { margin: 0 5em 1em 5em; } 

Tomemos el siguiente fragmento de código HTML como un ejemplo:

<ul> 
    <li> 
    <span>Blah blah blah.</span> 
    </li> 
    <li> 
    <a href="about:">Foo</a> 
    </li> 
</ul> 

Cuando el navegador va a generar el elemento <span>, se ve mira a través de todo el hojas de estilo (navegador, autor y usuario) para las reglas que coinciden y figures out which one is the most important. Para este ejemplo, la hoja de estilo autor contiene una sola regla:

ul { color: Green; } 

hoja de estilo interna de su navegador no especifica un valor color para span, por lo que se acerca la estructura del documento hasta que encuentre algo que hace tienen una color regla definida, en este caso ul.

Por otro lado, cuando el navegador hace que el elemento de <a>, no encuentra nada en las hojas de estilo de usuario o autor que especifican una color, por lo que utiliza la regla que se encuentra en la hoja de estilo del navegador.

El resultado final: texto verde, enlace azul.

Información adicional: Si está utilizando Firefox, puede ver (uno de) sus archivos CSS internos al pegar resource://gre/res/html.css en la barra de direcciones. (Parece que un hipervínculo directo confunde el motor de reducción de SO)

Answer 2

Eres derecho. Hay tres fuentes de hojas de estilo. Primero vienen los estilos de navegador, luego los estilos de usuario (lector) y finalmente los estilos de autor; Los estilos de autor generalmente prevalecen sobre los estilos de usuario. Cualquier cosa definida en la hoja de estilos predeterminada del navegador será anulada si un estilo se define más adelante en la cascada (en una hoja de estilo de usuario o autor) que lo afecte. Si hay algo que debe heredarse debido a un estilo escrito por el autor, entonces anula los estilos predeterminados, ya que se definió posteriormente en la cascada.

Go here para más información sobre la conexión en cascada.

Answer 3

Ignorando estilos en línea que anulan todo, si múltiples clases/selectores son aplicables a un elemento de página, el último definido gana (ya que los estilos de navegador se definen primero, generalmente se sobrescriben). La advertencia surge cuando hay una clase/selector que profundiza en todos los niveles de la jerarquía.

Aquí es una hoja de ejemplo:

<style type="text/css"> 
     #content 
     { 
      width: auto; 
     } 

     #content DIV.special 
     { 
      width: 200px; 
      background: #999999; 
      border: 2px dotted #000000; 
     } 

     #content DIV 
     { 
      width: 300px; 
      border: 1px solid #CCCCCC; 
     } 



    </style> 

Dado el siguiente código HTML:

 <div id="content"> 
      <div class="special"> 
       should render 200px wide with a gray background and a dotted border 
      </div> 
      <div> 
       should render 300px wide with a 1pt border 
      </div> 
     </div> 

Entonces, si se agrega este estilo a la parte inferior de la hoja:

DIV 
    { 
     background: #CC9999; 
    } 

Convertirás todo en un color morado claro (ya que es el último DIV con un valor de color) excepto el div con el .special clase (porque es más específico).

Espero que ayude.

Answer 4

La herencia de estilos de elementos de sus padres puede darse de dos maneras. En primer lugar, aunque los navegadores pueden definir propiedades de estilo para cada elemento, por lo general no lo hacen de manera exhaustiva. Por ejemplo, el elemento "p" generalmente tiene un margen superior predeterminado (entre otros), pero no define un estilo de fuente para que, en ausencia de reglas de autor o de usuario, se herede de su padre. En segundo lugar, en algunos lugares de CSS se puede usar un valor explícito de "inherit" para indicar al renderizador que adopte esa propiedad de estilo desde su elemento primario. Esto solía ser necesario en lugares en IE (creo que las celdas de la tabla), y sigue siéndolo cuando se anulan reglas anteriores en la cascada.

Answer 5

Según entiendo la pregunta, se está preguntando cuándo un elemento sin estilo adoptará el estilo definido en una hoja de estilos del navegador frente a cuándo adoptará el estilo de su elemento primario. Esta es una pregunta sobre la especificidad, no sobre la herencia. Tome este excesivamente obvia y simplista ejemplo:

hoja navegador
a { color: blue }

hoja de autor
div { color: green }

HTML
<div><a href="#">This is a link</a></div>

Como era de esperar, el enlace será azul, no verde, porque la regla del navegador es más específica. No tiene nada que ver con la herencia porque el enlace nunca tiene la posibilidad de heredar. Precedencia para los flujos de estilo de un elemento:

1. Estilo en línea; no puede ser más específico que esto, y triunfa sobre todo (¡la posible excepción es si!importante existe en una regla relevante)
2. Selector más específico (ubicado en cualquier lugar); se aplicará el selector con la especificidad más alta, sin importar dónde se encuentre en la estructura de herencia, como lo describe Rob Allen en este hilo
3. Selector aplicado más recientemente, luego analizando el árbol de herencia (etiquetas de estilo en el documento => hoja de autor => hoja de usuario => hoja de navegador; tenga en cuenta que la hoja de usuario puede anular la hoja de autor en algunos casos, pero generalmente el autor es definitivo)
4. Estilo de los padres para la propiedad (o si el padre no tiene la propiedad requerida , en el DOM); obviamente, no todas las propiedades se heredan

La razón principal por la que los estilos del navegador no se impiden estilos parentales se hereden es que los estilos del navegador son típicamente muy escasa y definen cosas como el color, tamaño de fuente, etc. lo más alto el árbol DOM como sea posible para que sea más fácil sobrescribirlo. Si tuviera un navegador que definiera, digamos, un color para los elementos de intervalo, entonces podría tener problemas para tratar de heredar un color div genérico.

Answer 6

Es posible que desee ver en la "especificidad" también

http://htmldog.com/guides/cssadvanced/specificity/