定位唯一的<li>：nth-​​child（1）：nth-​​last-child（1）

Question

在HTML容器中，我有时会有几个<li>个项目 - 每个pr。默认为right-margin: 25px;

但在某些情况下，我只有一个<li>项，如下所示：

<ul class="clear-container">
    <li class="clear">
      <a href="#"><span>› </span>
        when single < li > then margin-right 0
      </a>
    </li>
    <div class="some-other-div"></div>
</ul>

当<li>成为唯一的<li>孩子时，如何定位.clear-container li:nth-child(1):nth-last-child(1) { margin-right: 0; } ？

我尝试过以下但没有运气：

{{1}}

http://codepen.io/anon/pen/MyNGwJ

Answer 1

您是否尝试过.clear-container li:nth-child(1):last-of-type？

Answer 2

您可以尝试：

li:only-child 

或

  

这是你最好的选择：

     

li:only-of-type

或者，如果您需要特异性，请尝试：

li:first-child:last-child

或者

li:first-of-type:last-of-type

或

li:nth-child(1):nth-last-child(1) 

或

li:nth-of-type(1):nth-last-of-type(1)

有关only-child的{​​{1}}和this的详细信息，请参阅this。由于vals和Sidriel已经评论过，你的ul中有一个div，使得li 不为only-of-type，而是一个有兄弟姐妹的孩子。 only-child选择器组合或简称of-type应该适用于您的特定情况。