html - 删除 内 的 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;
} 

因此您的解决方案可能如下所示:

.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;} 

<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>