Wie CSS verwendet: first-child Pseudoelement

Dies ist die CSS-I mein MenüWie CSS verwendet: first-child Pseudoelement

.vd-menu-item { padding: 0; margin: 0; height: 100%; } 
.vd-menu-item:before {content: " | ";} 
.vd-menu-litem:first-child:before {content: " ";}

HTML stylen sind mit

<div class="vd-menu vd-menu-horizontal"> 
    <ul> 
     <li class="vd-menu-item"><a href="#" class="vd-menu-link">News</a></li> 
     <li class="vd-menu-item"><a href="#" class="vd-menu-link">Sports</a></li> 
     <li class="vd-menu-item"><a href="#" class="vd-menu-link">Finance</a></li> 
    </ul> 
</div>

Ich mag die Menüliste getrennt mit „| " zwischen ihnen wie

News | Sports | Finance

Also gedacht, mit: vor der li. Es funktioniert gut, aber das erste Kind, in diesem Fall "News" hat "|" bevor.

Ich versuchte mit First-Kind, aber es funktioniert nicht wie erwartet. Alle Trennzeichen "|" verschwindet.

Können Sie helfen?

Quelle

2016-04-30 Daksh B

Wie wäre es damit https://jsfiddle.net/Lg0wyt9u/693/? –

Wenn Sie das Leerzeichen vor dem ersten Kind nicht benötigen, betrachten Sie den Parameter '.vd-menu-item + .vd-menu-item :: before {content:" | ";}'. –

Sie könnten den: nicht Selector verwenden, um es einfacher zu machen.

.vd-menu-item { padding: 0; margin: 0; height: 100%; } 
.vd-menu-item:not(:first-child):not(:last-child)::before {content: " | ";}

Ich hoffe, dass ich Ihnen geholfen out :)

Quelle

2016-04-30 20:01:21 Unique

versuchte Ihre Lösung und das ist, was ich "News | Sport Finance" wo ich bin auf der Suche nach "News | Sport | Finanzen" –

Hmm, als ich kann nicht entschuldigen helfen :-( – Unique

warten, ich tat dies ".vd -menu-item: nicht (: first-child) :: before {content: "|";} "und es funktioniert. Hoffentlich ist es der richtige Weg, es zu tun. Deine Idee. Kannst du bitte deine Antwort so bearbeiten, dass ich akzeptiere –

Es scheint, dass Sie einen Tippfehler in Ihrem Code haben: .vd-menu-litem:

Quelle

2016-04-30 20:03:25

korrigiert den Tippfehler, danke. –

Dies scheint das Problem zu beheben. –

Wie CSS verwendet: first-child Pseudoelement

Antwort

Verwandte Themen