删除<li>中<span>的border-bottom nth-child

Question

我想将border-bottom: none;设置为第二，第四和第六跨度，依此类推。

为什么不喜欢：

.smallnav-item span:nth-child(2n+2){border-bottom: none;}

工作？

.smallnav-item span {
  width: 100%;
  border-bottom: 1px solid #e8d3e0;
  height: 70px;
  line-height: 1.4em;
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  justify-content: center;
  -ms-justify-content: center;
  padding: 0;
}

.smallnav-item {
  list-style: none;
}

<ul>
  <li class="smallnav-item">
    <span><a href="#" class="skolv-smallnav-item-link">one</a></span></li>

  <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
    link">two</a></span></li>

  <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
  link">three</a></span></li>

  <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
  link">four</a></span></li>
</ul>

.........

Answer 1

在您的情况下，单个<span>元素放在<li>元素中。因此:nth-child不适用于<span>元素，但您可以使用:nth-child元素上的<li>代替。

所以你可以改用以下的CSS：

ul li.smallnav-item:nth-child(even) span {
    border-bottom:none;
} 

因此，您的解决方案如下所示：

＆＃13;

＆＃13;

.smallnav-item span {
    width: 100%;
    border-bottom: 1px solid #e8d3e0;
    height: 70px;
    line-height: 1.4em;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -ms-justify-content: center;
    padding: 0;
}

.smallnav-item {
    list-style: none;
}
ul li.smallnav-item:nth-child(even) span {border-bottom:none;} 

＆＃13;

<ul>
<li class="smallnav-item">
        <span><a href="#" class="skolv-smallnav-item-link">one</a></span></li>
    <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
    link">two</a></span></li>
  <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
  link">three</a></span></li>
  <li class="smallnav-item"><span><a href="#" class="skolv-smallnav-item- 
  link">four</a></span></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。

.smallnav-item span {
    width: 100%;
    border-bottom: 1px solid #e8d3e0;
    height: 70px;
    line-height: 1.4em;
    display: flex;
    display: -ms-flexbox;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    -ms-justify-content: center;
    padding: 0;
}
.smallnav-item {
    list-style: none;
}
.smallnav-item:nth-child(even) span {
    border-bottom:none;
}

<ul>
    <li class="smallnav-item">
        <span>
            <a href="#" class="skolv-smallnav-item-link">one</a>
        </span>
    </li>
    <li class="smallnav-item">
        <span>
            <a href="#" class="skolv-smallnav-item- 
    link">two</a>
        </span>
    </li>
    <li class="smallnav-item">
        <span>
            <a href="#" class="skolv-smallnav-item- 
  link">three</a>
        </span>
    </li>
    <li class="smallnav-item">
        <span>
            <a href="#" class="skolv-smallnav-item- 
  link">four</a>
        </span>
    </li>    

</ul>