Question

我想添加＆＃34; |＆＃34;在每个li元素之后但不包括last li。我该怎么办？

HTML

<nav class="footer-menu">
<ul>
   <li><a href="">Blog</a></li>
    <li ><a href="#">Page B</a></li>
   <li><a href="">Page A</a></li>
</ul>

CSS

.footer-menu ul li{display: inline-table;}
.footer-menu {text-align: center; background: #FFF;}
.footer-menu ul li:after {
    font-size: 13px;
    color: #999;
    width: 100%;
    content:"|";
}

Answer 1

使用:not()和:last-child

.footer-menu ul li{display: inline-table;}
.footer-menu {text-align: center; background: #FFF;}
.footer-menu ul li:not(:last-child):after {
    font-size: 13px;
    color: #999;
    width: 100%;
	  content:"|";
}

<nav class="footer-menu">
    <ul>
       <li><a href="">Blog</a></li>
        <li ><a href="#">Page B</a></li>
       <li><a href="">Page A</a></li>
    </ul>
</nav>

使用li时不要包括最后一个孩子：之后

1 个答案: