:first-of-type 表现得好像它不存在一样？答案

【问题标题】：:first-of-type acting as if it doesn't exist?:first-of-type 表现得好像它不存在一样？
【发布时间】：2017-02-28 01:19:15
【问题描述】：

我正在使用 :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

【问题讨论】：

标签： css css-selectors pseudo-class

【解决方案1】：

:first-of-type 的作用并不完全直观——它不考虑整个文档，而是将父元素作为参考点。从这个意义上说，每个锚元素都是封闭li 元素中的“其类型的第一个元素”，这就是选择器应用于每个元素的原因。相反，您需要做的是将:first-of-type 下移一级到li 元素。由于它们都在同一级别，因此只有第一个 li 受到影响。（但是，这也会影响同一页面上另一个列表中的第一个 li。

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

your modified fiddle

【讨论】：