Как использовать CSS: первый-ребенок псевдо-элемент

Это CSS я использую стилизовать мое менюКак использовать CSS: первый-ребенок псевдо-элемент

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

HTML

<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>

Я хочу, чтобы отделить список меню с «| " между ними, как

News | Sports | Finance

Так что подумал об использовании: перед ли. Он работает хорошо, но первый ребенок, в этом случае «Новости» имеет «|» перед этим.

| News | Sports | Finance

Я пробовал использовать первого ребенка, но он не работает должным образом. Весь разделитель «|» исчезает.

Вы можете помочь?

источник

2016-04-30 Daksh B

Как об этом https://jsfiddle.net/Lg0wyt9u/693/? –

Если вам не нужно пространство перед первым дочерним элементом, рассмотрите файл .vd-menu-item terser .vd-menu-item :: before {content: "|";} '. –

Вы можете использовать: not Selector, чтобы сделать его проще.

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

Я надеюсь, что я помог вам :)

источник

2016-04-30 20:01:21 Unique

попробовал ваше решение, и это то, что я получаю «Новости | Спорт Финансы», где я ищу «Новости | Спорт | Финансы» –

Хм, чем я не могу помочь извините :-( – Unique

wait, я сделал это «.vd -menu-item: not (: first-child) :: before {content: "|";} "и он работает. Надеюсь, это правильный способ сделать это. Ваша идея. Можете ли вы изменить свой ответ, чтобы я принял –

Похоже, что у вас есть опечатка в коде: .vd-menu-litem:

источник

2016-04-30 20:03:25

исправил опечатку, спасибо. –

Это, кажется, исправить проблему. –

Как использовать CSS: первый-ребенок псевдо-элемент

ответ

Смежные вопросы