为什么：第一个孩子：在针对所有元素之前？

-1

我有一个项目列表，我尝试使用：psuedo元素前添加分隔符到右边。为什么：第一个孩子：在针对所有元素之前？

不幸的是，当我将它与最后一个孩子和第一个孩子结合使用时，它将目标锁定在列表中的每个元素上。

标记

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

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

来源

2013-07-09 PI.

请在此处发布您的代码。 – j08691

请不要链接到Stackoverflow上的外部代码。一旦代码移动，你的问题就没用了。 –

@Diodeus为了澄清，鼓励外部例如jsfiddle和codepen，但是作为SO本身发布的代码的补充。 – Michal

发生这种情况，因为你有内部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

来源

2013-07-09 17:32:02 Michal

改变你的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的第一个孩子。

第一个孩子的CSS伪类代表任何元素，它是父类的第一个子元素。

见doc

来源

2013-07-09 17:31:21 PSL

为什么：第一个孩子：在针对所有元素之前？

回答

相关问题