我有一个项目列表,我试图在每个使用:在psuedo元素之前添加分隔符。
不幸的是,似乎当我将它与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: "*"; }
有谁知道为什么会发生这种情况,如果是的话,如何解决?
答案 0 :(得分:4)
将您的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
答案 1 :(得分: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
类。