Question

我有4个链接并添加了“|”在每个链接之间。

.linkblock li a:first-child:after {content:" "; white-space: pre;}

我习惯删除“|”来自第一个工作的孩子：

.linkblock li a:nth-child(4):after  {content:" "; white-space: pre;}

对于最后一个孩子我已经尝试了很多，但最后一个孩子不起作用。使用的最后一个：

.linkblock li a:after {content: " |"; white-space: pre}
.linkblock li a:first-child:after {content: ""; white-space: pre}
.linkblock li a:nth-child(4):after {content: ""; white-space: pre}

但没有做任何事情。

是改变它的方法吗？

<div class="linkblock float-left f15 ml-2">
  <ul>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf"  href="#investment-platform">Client Platform</a></li>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#golden-visa">Country Programmes</a></li>
    <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#ahimsa-investments">Ahimsa Investments</a></li>
  </ul>
</div>

Answer 1

使用更少且更清晰的代码更轻松地定位li跟随其他li（使用相邻兄弟组合）或+）以便自动排除第一个，并且通过使用:before伪元素，您甚至不必将最后一个定位到＆＃34;隐藏＆＃34 ; content：

＆＃13;

.linkblock li {
  display: inline-block;
}

.linkblock li + li:before {
  content: "|";
  white-space: pre;
}

＆＃13;

<div class="linkblock float-left f15 ml-2">
  <ul>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#investment-platform">Client Platform</a>
    </li>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#golden-visa">Country Programmes</a>
    </li>
    <li>
      <span class="arrow" id="rotate"></span>
      <a class="linkblockf" href="#ahimsa-investments">Ahimsa Investments</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

最后一个孩子和第一个孩子属于li元素。而且您不需要定位第一个元素：

.linkblock li {
  display: inline-block;
}
.linkblock li a:after {
  content:" |";
  white-space: pre;
}
.linkblock li:last-child a:after {
  content:" "; 
}

<div class="linkblock float-left f15 ml-2">
    <ul>
        <li><span class="arrow" id="rotate"></span><a class="linkblockf"  href="#investment-platform">Client Platform</a></li>
        <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#golden-visa">Country Programmes</a></li>
        <li><span class="arrow" id="rotate"></span><a class="linkblockf" href="#ahimsa-investments">Ahimsa Investments</a></li>
    </ul>
</div>

定位要添加的类属性：after

2 个答案: