：最初の型はあたかも存在しないかのように振る舞いますか？

Question

私はfirst-of-typeをまったく使用していないかのように動作し、すべての要素のマージンを取り除いていますが、余分な部分を削除するために:first-of-type疑似クラスを使用しています。ここで

は、コードは次のとおりです。

HTML

<ul id="share" class="hidden-xs"> 
     <li><a href="#" class="twitter-share socialicon" title="Share on Twitter"><em class="fa fa-twitter" aria-hidden="true"></em><div class="sr-only">Share on Twitter</div></a></li> 
    <li><a href="#" class="instagram-share socialicon" title="Share on Instagram"><em class="fa fa-instagram" aria-hidden="true"></em><div class="sr-only">Share on Instagram</div></a></li> 
     <li><a href="#" class="envelope-share socialicon" title="Share via Email"><em class="fa fa-envelope" aria-hidden="true"></em><div class="sr-only">Share via Email</div></a></li> 
</ul> 

CSS

.socialicon { 
    margin-left: 80px; 
    font-size: 12px; 
    vertical-align: middle; 
} 

.socialicon:first-of-type { 
    margin-left: 0px; 
} 


ul#share{ 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    display: inline; 
    line-height: 19px; 
    margin-left: 15px; 
} 
ul#share li{ 
    display: inline-block; 
} 
ul#share li span { 
    color: white; 
    font-weight: 600; 
    text-transform: uppercase; 
} 

JSFIDDLE

Answer 1

:first-of-typeはまさに直感的にそれが何をするかではない - それは全体を取ることはありません文書を考慮に入れるが、親要素を参照として受け取るnceポイント。その意味で、それぞれのアンカー要素は、その要素を囲むli要素内の「その型の最初の要素」であり、そのため、その要素のそれぞれにセレクタが適用されます。代わりに:first-of-typeを1レベル下に移動してli要素に移動します。それらはすべて同じレベルにあるため、最初のliのみが影響を受けます。 （ただし、同じページの別のリストの最初のliにも影響します）。

li:first-of-type .socialicon{ 
    margin-left: 0px; 
} 

your modified fiddle