Anidamiento de estilos CSS: ¿forma adecuada?

Tengo un problema al tratar de encontrar detalles específicos sobre cómo escribir correctamente las reglas de CSS en una hoja de estilo donde la clase o ID está anidado en muchos otros ID y estilos, p.Anidamiento de estilos CSS: ¿forma adecuada?

.mainbody #container #header #toprightsearch .searchbox {}

Así que aquí tenemos una clase searchbox dentro de un ID toprightsearch, en un ID de cabecera, en un ID de contenedor, en una clase mainbody.

Pero parece funcionar correctamente si omito algunos de los ID.

¿Cuál es la forma correcta de de enumerarlas?
Si incluyo a todos los padres ¿lo hace más específico? ¿Puede error en diferentes navegadores si no incluyo todo?

Y cualquier información adicional sobre este tema sería apreciada.

Gracias

Fuente

2009-06-07 user103219

Si incluye más padres, sí aumenta la especificidad del selector. No deberías tener problemas de navegador cruzado que omitan a los padres.

No hay correcto número de padres a la lista; depende de lo que requiera para su marcado. Como puede ver, selector1 selector2 significa selector2 en cualquier nivel dentro de selector1, y puede ajustarlo para cualquier comportamiento que necesite.

En su ejemplo, que debe enumerar .mainbody #container #header #toprightsearch .searchbox si lo que quiere decir es para el estilo de aplicar únicamente a .searchbox es que están dentro de toda esa jerarquía. Si, por el contrario, quiere .searchboxes que existen otros en condiciones para obtener el mismo estilo, debe ser menos restrictivo en la jerarquía. Solo se trata de lo que intentas lograr.

Comentario Re: IDs producen más especificidad, por lo que omitirlos reduce más la especificidad de su regla.

Fuente

2009-06-07 16:49:06 chaos

Ok, ¿hay alguna diferencia entre omisión de IDs y clases? – user103219

El código siguiente hace lo que dice (al menos en Firefox). colorea la entrada de color rojo

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Untitled Document</title> 
<style type="text/css"> 
.mainbody #container #header #toprightsearch .searchbox { 
    background-color:red; 
} 
</style> 
</head> 

<body class="mainbody"> 

<div id="container"> 
    <div id="header"> 
     <div id="toprightsearch"> 
      <input type="text" class="searchbox" /> 
     </div> 
    </div> 

</div> 
</body> 
</html>

Creo que debería ver si hubo algún error al deletrear las ID y las clases.

Fuente

2009-06-07 16:45:29 jao

gracias, pero no estoy teniendo problemas para hacerlo funcionar. Me acabo de dar cuenta de que funciona a veces si omito las identificaciones y las clases de los padres.Así que estoy buscando la forma correcta de listar las reglas. – user103219

Quien haya votado negativamente esto tiene problemas. Esta fue una muy buena respuesta a la pregunta que sonaba como preguntaba Razass. – Chuck

La pregunta era por qué podría omitir algunos de los combinadores y obtener el mismo resultado, no una pregunta de "esto se descarta" sino un "¿por qué funciona esto todavía?" pregunta. Probablemente fue votado a la baja porque parece que jao no leyó la pregunta con cuidado (no lo voté) –

Desde el W3 Selectors Documentation:

selectores de descendientes expresan una relación tal en un patrón. Un selector descendente se compone de dos o más selectores separados por espacios en blanco. Un selector descendiente de la forma coincidencias "AB" cuando un elemento B es un descendiente arbitrario de algún elemento antepasado A.

Así que en resumen, sin que no tiene que incluir todas de los elementos primarios y no debería causar ningún problema entre navegadores.Sin embargo, con este selector:

.mainbody .searchbox {}

Los estilos definidos se aplicarán a cualquier elemento con una clase de searchbox si desciende directamente o indirectamente de un elemento con clase mainbody.

Con el selector de propuesta, sin embargo:

.mainbody #container #header #toprightsearch .searchbox {}

Los estilos definidos son elementos más específicos, por lo que sólo que descienden de un elemento con clase mainbody, entonces los elementos con los ID de #container, #header, #toprightsearch en ese orden y que tenga un nombre de clase searchbox tendrá aplicados los estilos definidos.

Fuente

2009-06-07 16:57:55

.searchbox {}

Estilos nada con .searchbox

.mainbody .searchbox{}

Estilos cualquier .searchbox que desciende desde cualquier .mainbody, hijo directo, nieto, bisnieto cuádruple, no importa.

#toprightsearch > .searchbox {}

Estilos únicos .searchboxes que son hijos directos de #toprightsearch

#container * .searchbox {}

Estilos de .searchbox que están nieto o después de #container.

He aquí un buen documento sobre el tema: w3C selectors

Fuente

2009-06-07 17:00:18

Id de son específicas de la página. Así que usted acaba de utilizar

#toprightsearch { 
stylename: stylevalue; 
}

Si su búsqueda de clases anidadas entonces el formato correcto es

.header .textBoxes { 
    stylename: stylevalue; 
}

Si conoce el niño exacta de uno de los padres a continuación, utiliza el signo>. Así que si el documento era así:

<div class="header"> 
    <div class="menu"> 
     <input type="text" class="textBox" /> 
    </div> 
</div>

Se puede utilizar esta:

.header > .menu > .textBox {somestyle:somevalue;}

Esto significa que sólo los artículos con una clase .textBox directamente en el interior de un artículo de la clase .menu que es en sí directamente debajo de una elemento con una clase de .header.

Fuente

2012-08-20 20:48:25 David

Teóricamente, una ID solo debe usarse para un elemento específico en una página. Por lo que sólo debe tener un elemento con un ID de toprightsearch por lo que para su CSS, sólo es necesario indicar:

toprightsearch .searchbox {}

porque sólo hay un artículo en su página con un ID de toprightsearch, Todos los otros selectores son innecesario.

Si tiene dos elementos en su página con un ID de toprightsearch, esa es una mala práctica de codificación.

Fuente

2017-10-24 19:08:33 Neptune704

Anidamiento de estilos CSS: ¿forma adecuada?

Respuesta

Cuestiones relacionadas