为什么:第一个孩子:在针对所有元素之前?
问题描述:
我有一个项目列表,我尝试使用:psuedo元素前添加分隔符到右边。为什么:第一个孩子:在针对所有元素之前?
不幸的是,当我将它与最后一个孩子和第一个孩子结合使用时,它将目标锁定在列表中的每个元素上。
示例 - 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: "*"; }
有谁知道为什么发生这种情况,如果是这样,如何解决呢?
答
发生这种情况,因为你有内部li
元素a
元素和你正在申请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>
而且你的CSS为first-child
/last-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
答
改变你的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: "*"; }
:first-child
伪类选择它的父,类似于:last-child
的第一个孩子。
第一个孩子的CSS伪类代表任何元素,它是父类的第一个子元素。
见doc
请在此处发布您的代码。 – j08691
请不要链接到*上的外部代码。一旦代码移动,你的问题就没用了。 –
@Diodeus为了澄清,鼓励外部例如jsfiddle和codepen,但是作为SO本身发布的代码的补充。 – Michal