2011-01-06 19 views
5

A continuación, ¿cómo hago referencia a la clase "nombre"?¿Cuál es la sintaxis de CSS para una clase span especificada anidada en un div?

<div class="resultDetails"> 
<span class="name">Name</span> 
<span class="address">Address</span> 
</div> 
+0

¿Puede usted dar más detalles? – Chandu

+0

Como puede ver en sus respuestas disponibles, realmente necesita averiguar si hay algún factor limitante aquí. ¿Solo necesitas 'name' cuando se trata de un' span'? solo dentro de 'resultDetails'? solo directamente después de 'div's? – jcolebrand

Respuesta

7
div span.name { ... } 

div .. le dice al tipo de elemento

un espacio continuación span .. dice que mirar elementos span en los niveles sub

.name .. dice que mirar esos elementos con el nombre de clase CSS name

2
div.resultDetails > span.name { ... } 

debería funcionar.

+0

Diría que no debería tener 'div' allí a menos que desee que estos estilos se apliquen solo a una etiqueta div .... quedarse con los selectores de CSS sin etiquetas reduce el tamaño del archivo de las hojas de estilo, por lo que es una buena práctica. – Webnet

+0

@webnet: OP fue específico para obtener la etiqueta _that_ span, así que quiero la ruta explícita. Aunque tiendo a estar de acuerdo contigo. –

+0

Creo que esto es offtopic. Tal vez necesite un acercamiento general tal vez quiera establecer un estilo para esta combinación específica de div y span. –

3

simplemente

<style> 
.name 
{ 

} 
</style> 

Todo lo que necesita es el nombre de la propia clase, a menos que otros factores contrario, puede utilizar varios tipos de selectores

div span.name // selects all spans with class "name" in any div 
div > span.name // this one selects only the spans that are direct children of a div 
div.resultDetails span.name //select only spans with class "name" in only divs with class="result Details 
.resultDetails .name // selects any element with class "name" in any element with class "resultDetails" 

Hay más maneras de seleccionar pero entender el punto.

1

div.resultDetails> span.name funciona en la mayoría de los navegadores.

Sin embargo, no funciona en IE6. Si eso es un problema, simplemente use: div.resultDetails span.name {} debe apuntar al tramo correctamente (siempre que no tenga ningún elemento span.name anidado dentro del div que no tenga la intención de orientar).

Cuestiones relacionadas