2016-05-03 11 views
1

Was ist der einfachste Selektor für das Styling jeder Zeile (nach Zeile ich meine jede dd - dt Paar, die in meiner Meinung scheinen, in der gleichen Zeile erscheinen) der Definitionsliste, aber Der Erste? Ich muss den oberen Rand einstellen.Styling jeder Zeile, aber die erste in HTML-Definitionsliste

<dl> 
    <dt>...</dt> 
    <dd>...</dd> 

    <dt>...</dt> 
    <dd>...</dd> 

    <dt>...</dt> 
    <dd>...</dd> 

    (...) 
</dl> 

Mein Ziel ist unten. Gibt es eine einfachere Möglichkeit, es zu schreiben?

dl > dt:not(:first-of-type), 
dl > dd:not(:first-of-type) { 
    margin: 1mm 0 0 0; 
} 
+2

nur dt verwenden + dt oder dt ~ dt, wenn dd dazwischen erste ist wird den Stil nicht anwenden –

Antwort

3

von meinem Kommentar:

nur dt+dt oder dt ~ dt verwenden, wenn gibt es dd dazwischen, wird zunächst ein nicht gelten den Stil

auch Stil dd hinter Um die Wähler wiederholen und es auch für dd verwenden: dt ~dt ~dd

dt ~dt { 
 
    color: red; 
 
} 
 
dt ~dt ~dd { 
 
    color: tomato; 
 
}
<dl> 
 
    <dt> first</dt> 
 
    <dd>in between</dd> 
 
    <dt>not first</dt> 
 
    <dd>in between</dd> 
 
    <dt> not first</dt> 
 
    <dd>in between</dd> 
 
</dl>

+0

Das scheint eine einfache, saubere Lösung zu sein. Vielen Dank! –

+0

Aber ich denke, um meine Frage vollständig zu beantworten, sollten Sie auch 'dd ~ dd' Selektor hinzufügen, weil das Stylen von' dt'-Elementen nur die ganze Reihe nicht stylen wird. –

+0

@Robert wenn du auch dd nach dem zweiten dt stylen willst, brauchst du: dt ~ dt ~ dd auch;) –

2
dl > dt:nth-of-type(n + 2) { ... } 
dl > dd:nth-of-type(n + 2) { ... } 

Zusammenbruch:

0 + 2 = 2nd instance 
1 + 2 = 3rd instance 
2 + 2 = 4th instance 
    . 
    . 
    . 
+1

Der, von dem ich nicht wusste, und es sieht ziemlich flexibel aus. Vielen Dank. –

Verwandte Themen