2011-01-06 3 views
5

Wie referenziere ich im Folgenden die Klasse "name"?Wie lautet die CSS-Syntax für eine benannte Span-Klasse, die in einem Div verschachtelt ist?

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

Können Sie es ausarbeiten? – Chandu

+0

Wie Sie aus Ihren verfügbaren Antworten sehen können, müssen Sie wirklich herausfinden, ob es hier einschränkende Faktoren gibt. Brauchen Sie nur 'name' wo es auf einer' span' kommt? nur innerhalb 'resultDetails'? nur direkt nach 'div's? – jcolebrand

Antwort

7
div span.name { ... } 

div .. teilt den Elementtyp

ein Raum dann span .. bei Spannweite Elementen in Unterebenen

.name .. aussehen erzählt erzählt an diesen Elementen mit CSS-Klasse suchen benannt name

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

Sollte funktionieren.

+0

Ich würde sagen, dass Sie dort nicht div haben sollten, es sei denn, Sie möchten, dass diese Stile nur auf ein div-Tag angewendet werden. Das Festhalten mit CSS-Selektoren ohne Tags reduziert die Dateigröße von Stylesheets. – Webnet

+0

@webnet: OP war spezifisch dafür, _that_ span tag zu bekommen, also will ich den expliziten Weg. Ich stimme dir allerdings zu. –

+0

Ich denke, das ist offtopic. Vielleicht braucht er einen allgemeinen Ansatz, vielleicht möchte er einen Stil für diese spezielle Kombination aus div und span festlegen. –

3

einfach

<style> 
.name 
{ 

} 
</style> 

Alles, was Sie brauchen, ist der Name der Klasse selbst, es sei denn, andere Faktoren sonst Sie verschiedene Arten von Selektoren

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" 

Es gibt mehr Möglichkeiten zur Auswahl verwenden können, aber Sie Holen Sie den Punkt.

1

div.resultDetails> span.name funktioniert in den meisten Browsern.

Es funktioniert jedoch nicht in IE6. Wenn das ein Problem ist, verwenden Sie einfach: div.resultDetails span.name {} sollte den Bereich richtig ausrichten (vorausgesetzt, Sie haben keine verschachtelten span.name-Elemente innerhalb des div, das Sie nicht als Ziel haben möchten).

Verwandte Themen