Question

我有一个项目列表，我试图在每个使用：在psuedo元素之前添加分隔符。

不幸的是，似乎当我将它与last-child和first-child结合使用时，它会定位到列表中的每个元素。

标记

<ul class="nav nav--inline nav--secondary">
        <li><a class="nav--secondary__item" href="#">Site Map</a>        </li>
            <li><a class="nav--secondary__item" href="#" title="Search Terms">Search Terms</a>        </li>
            <li><a class="nav--secondary__item" href="#" title="Advanced Search">Advanced Search</a>        </li>
                            <li><a class="nav--secondary__item" href="#" title="Contact Us">Contact Us</a>        </li>
</ul>

CSS

.nav--inline, .nav--inline > li, .nav--inline > li > a { float: left; }

.nav--secondary__item {
    color: #706782;
    font-size: 1.2em;
    padding: 0.8em;
    position: relative;
    @include transition (background-color 0.5s ease-in-out);
}

.nav--secondary__item:before {
    content: "|";
    color: #939EB7;
    position: absolute;
    left: 0;
}

.nav--secondary__item:first-child:before, .nav--secondary__item:last-child:before { content: "*"; }

有谁知道为什么会发生这种情况，如果是的话，如何解决？

Answer 1

将您的CSS更改为：

li:first-child .nav--secondary__item:before, 
li:last-child .nav--secondary__item:before {
    content:"*";
}

由于.nav--secondary__item是其父亲li的第一个孩子以及最后一个孩子，因此以下选择器将内容应用于所有这些内容。

.nav--secondary__item:first-child:before, 
.nav--secondary__item:last-child:before 
{ content: "*"; }

<强> Fiddle

:first-child伪类选择其父级的第一个子级，类似:last-child。

：first-child CSS伪类表示作为其父元素的第一个子元素的任何元素。

参见 doc

Answer 2

这种情况正在发生，因为您在a元素中有li个元素，并且您正在将first-child应用于这些a元素。

所以.nav--secondary__item:first-child适用于每个.nav--secondary__item，因为每个a的父母都是周围的li，而不是您的ul。

按照您的班级命名方案，您可以将HTML更改为如下所示：

<li class="nav--secondary__item">
  <a class="nav--secondary__item__link" href="#" title="Site Map">Site Map</a>
</li>

first-child / last-child的CSS需要稍微调整一下：

.nav--secondary__item:first-child .nav--secondary__item__link:before,
.nav--secondary__item:last-child .nav--secondary__item__link:before { 
  content: "*"; 
}

您还必须使适用于a元素的样式改为使用.nav--secondary__item__link类。

来自您的示例：http://codepen.io/anon/pen/rknmL

为什么：first-child：在定位所有元素之前？

2 个答案: