-1

我有一个项目列表，我正在尝试使用 :before 伪元素在每个项目的右侧添加分隔符。

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

示例 - http://codepen.io/anon/pen/rupqi

标记

<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: "*"; }

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

4

2 回答 2

4

将您的 CSS 更改为：

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

因为.nav--secondary__item它是 parent 的 first-child 也是 last-child li，所以下面的选择器将内容应用于所有这些。

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

小提琴

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

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

见文档

于 2013-07-09T17:31:21.767 回答
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/的 CSSlast-child需要稍微调整一下：

.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

于 2013-07-09T17:32:02.250 回答