使用：after with：最後一個孩子在CSS

Question

我有兩個電話號碼標記爲列表。我需要在第一個前加上「Foo：」，第二個加上「Bar：」。我可以達到「Foo：」而不是「Bar：」。根據下面的代碼，我該如何實現「Bar：」？

#top_bar .phone .icon-phone:after { 
 
    content: 'Foo:'; 
 
} 
 
#top_bar .phone:last-child .icon-phone:after { 
 
    content: 'Bar:'; 
 
}

<div id="top_bar"> 
 
    <ul class="contact_details"> 
 
    <li class="phone"> 
 
     <i class="icon-phone"></i><a href="tel:00001">00001</a> 
 
    </li> 
 
    <li class="phone"> 
 
     <i class="icon-phone"></i><a href="tel:00002">00002</a> 
 
    </li> 
 
    <li class="mail"> 
 
     <i class="icon-mail "></i><a href="mailto:foo@bar.com ">foo@bar.com</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

你試過:nth-child(n)？這是非常有幫助的解決這類的東西：

#top_bar .phone:nth-child(1) .icon-phone:after{ 
 
    content: 'Foo:'; 
 
} 
 
#top_bar .phone:nth-child(2) .icon-phone:after { 
 
    content: 'Bar:'; 
 
}

<div id="top_bar"> 
 
    <ul class="contact_details"> 
 
    <li class="phone"> 
 
     <i class="icon-phone"></i><a href="tel:00001">00001</a> 
 
    </li> 
 
    <li class="phone"> 
 
     <i class="icon-phone"></i><a href="tel:00002">00002</a> 
 
    </li> 
 
    <li class="mail"> 
 
     <i class="icon-mail "></i><a href="mailto:foo@bar.com ">foo@bar.com</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

.phone:nth-child(1):before { content: 'Foo:'; font-style: italic; } 
.phone:nth-child(2):before { content: 'Bar:'; font-style: italic; } 

DEMO