CSS y estilos superiores en elementos anidados

Esto surgió de otra pregunta que se formuló here pero creo que es algo que probablemente tiene un enfoque de "mejores prácticas".CSS y estilos superiores en elementos anidados

Al diseñar un sitio web, lo más probable es que el diseñador prepare un conjunto de estilos genéricos para todos los elementos dentro de un sitio web. (Fuentes estándar para texto en Divs/Spans/H1/H2s)

En el caso de las tablas, también pueden definir bordes y alineaciones predeterminadas en todo el sitio ... p.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
}

Sin embargo, si usted tiene una tabla dentro de una tabla (del ejemplo RSolberg 's, un calendario AJAX dentro de una cuadrícula de datos), entonces ambos sus padres & tablas anidadas se heredan tanto estos estilos. (Supongamos que es por eso que se llaman en cascada)

Mi pregunta es cuál es la mejor práctica para aplicar estilos a la mayoría de los elementos sin tener elementos secundarios que también los hereden.

En caso de que simplemente proporcione una anulación que deshace el estilo que haya aplicado.

p. Ej.

Table 
{ 
    border: dashed 1px #333333; 
    padding: 2px; 
} 

Table Table 
{ 
    border: solid 0px #000000; 
    padding: 0px; 
}

Fuente

2009-04-21 Eoin Campbell

Sé que ambas soluciones funcionarán chicos. Me pregunto desde el punto de vista de los diseñadores de Html/Css cuál es la mejor práctica. Supongo que no hay una bandera CSS mágica que diga "Aplicar niveles N profundos y detener" –

Si usted tiene HTML como esto:.


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

Se podría aplicar estilos sólo a la div que es hijo del elemento body con el selector niño (>) like this:

 body > div { border:solid 1px orange; }

The nested div no obtendrá una frontera

Para obtener más información, visite: http://www.w3.org/TR/CSS2/selector.html#child-selectors.

Tenga en cuenta que Internet Explorer 6 no supone rt el niño selector.

Fuente

2009-04-21 18:43:20 knut

aha esto está más cerca de lo que tenía en mente. Para que pueda especificar "estilos de sitio de nivel superior" que se aplicarán a las estructuras principales del sitio, sin preocuparse por atornillar el contenido de esos elementos. Gracias knut –

Sí. La regla de "tabla de tabla" anulará la regla de "tabla" porque es more specific. Lo que describió es la mejor manera de tener un estilo para la mesa más externa y otro estilo para las tablas internas, suponiendo que ninguna de las tablas tenga una clase o ID que le permita usar más selectores semánticos.

En la práctica, es más probable que necesite utilizar esta técnica con listas.

ol { list-style: upper-roman } 
ol ol { list-style: upper-alpha } 
ol ol ol { list-style: lower-roman } 
ol ol ol ol { list-style: lower-alpha }

Fuente

2009-04-21 18:30:48

Añadir una clase o ID de la tabla externa:

<style type="text/css"> 
.outer {border: dashed 1px #333333;} 
</style> 
</head> 
<body> 
    <table class="outer"> 
    <tr><td>before inner table. 
    <table> 
    <tr> 
    <td>Inside inner table.</td> 
    </tr> 
    </table> 
    After inner table. 
    </td> 
    </tr> 
    </table>  
</body>

Ver que here

Si no se puede añadir identificadores o clases para el HTML y suponiendo que la tabla que desea el estilo no está dentro de otra tabla, puede darle estilo al especificar de qué elemento es un elemento secundario:

div > table {border: dashed 1px #333333;}

Véalo here

Aunque ese selector solo se implementó en IE7, por lo tanto, si necesita admitir IE6, deberá utilizar el método de anulación de la pregunta.

Fuente

2009-04-21 18:36:26

Eso no siempre es posible Sam. Hay ciertos escenarios en los que se trata de controles del lado del servidor que arrojan el HTML, donde tener que agregar ID/nombres de clase puede significar escribir algún código onRender complicado para virar. Me refiero a la mejor forma de práctica de proporcionar anulaciones en diferentes niveles de anidación cuando no hay # IDs/.ClassNames para filtrar por –

Se agregó una forma de hacerlo sin agregar al HTML, pero hasta que IE6 se caiga de su uso, podría pasar un tiempo antes de que podamos llamarlo práctica estándar. –

Estoy de acuerdo con su idea inicial en este caso, pero no depende de las circunstancias.

Crea siempre la regla base y agrégala a la hoja de estilos con excepciones a esa regla.

Por ejemplo, si está seguro de que una tabla dentro de una tabla nunca necesitará el mismo estilo aplicado, utilice el selector "tabla de tabla" para establecer el estilo. Sin embargo, si eso solo puede ocurrir una vez, configure una clase en la tabla principal y modifique su selector de "tabla de tabla" para que sea algo similar a "tabla tabla tabla".

Sin embargo, "parent" debería cambiarse a un nombre descriptivo para el elemento, como calendarios, ya que eso es lo que es. No debe nombrar una clase después de un estilo en particular porque si el estilo cambia ya no tiene sentido.

Fuente

2009-04-21 18:54:12

CSS y estilos superiores en elementos anidados

Respuesta

Cuestiones relacionadas