如何使用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>

我想在菜單列表與「分離的CSS | 「在他們之間喜歡

News | Sports | Finance

所以想到使用：在李之前。它運作良好，但第一個孩子，在這種情況下，「新聞」有「|」在它之前。

| News | Sports | Finance

我試過使用第一個孩子，但它沒有按預期工作。所有分隔符「|」消失。

你能幫忙嗎？

來源

2016-04-30 Daksh B

這個怎麼樣https://jsfiddle.net/Lg0wyt9u/693/？ –

如果您在第一個孩子之前不需要空間，請考慮terser .vd-menu-item + .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

等，我做了這個「.vd -menu-item：not（：first-child）:: before {content：「|」;}「並且它可以工作，希望它是正確的方式，你的想法。 –

看來，你在你的代碼一個錯字：.vd-menu-litem:

來源

2016-04-30 20:03:25

更正了錯字，謝謝。 –

這似乎解決了這個問題。 –

如何使用CSS：第一子僞元素

回答

相關問題