如何删除ul li last child上的边框

Question

我在每个li上都设置了:after伪元素的边框。

＆＃13;

＆＃13;

.menu_bottom ul li{
    float: left;
    color: #00a0dc;
    list-style-type: none;
    position: relative;
}
.menu_bottom ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #00a0dc;
    padding: 5px 12px;
}
.menu_bottom ul li:after{
    content: "";
    border-right: 1px solid #00a0dc;
    position: absolute;
    right: 0px;
    top: 3px;
    height: 11px;
}
.menu_bottom ul li:after:last-child{
    border: none;
}

＆＃13;

<div class="menu_bottom">
   <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">our services</a></li>
      <li><a href="#">contact us</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

不知道如何移除最后一个孩子的边界。使用:after:last-child，但它不起作用。

Answer 1

使用:not()伪类选择器来避免最后一个孩子。

.menu_bottom ul li{
    float: left;
    color: #00a0dc;
    list-style-type: none;
    position: relative;
}
.menu_bottom ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #00a0dc;
    padding: 5px 12px;
}
.menu_bottom ul li:not(:last-child):after{
    content: "";
    border-right: 1px solid #00a0dc;
    position: absolute;
    right: 0px;
    top: 3px;
    height: 11px;
}

<div class="menu_bottom">
   <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">our services</a></li>
      <li><a href="#">contact us</a></li>
    </ul>
</div>

Answer 2

更改：

.menu_bottom ul li:after:last-child {

要

.menu_bottom ul li:last-child:after {

＆＃13;

＆＃13;

.menu_bottom ul li{
    float: left;
    color: #00a0dc;
    list-style-type: none;
    position: relative;
}
.menu_bottom ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: #00a0dc;
    padding: 5px 12px;
}
.menu_bottom ul li:after{
    content: "";
    border-right: 1px solid #00a0dc;
    position: absolute;
    right: 0px;
    top: 3px;
    height: 11px;
}
.menu_bottom ul li:last-child:after{
    border: none;
}

＆＃13;

<div class="menu_bottom">
   <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">our services</a></li>
      <li><a href="#">contact us</a></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;