Question

我在页脚中有一个链接列表，并希望在除了第一个之外为每个页面添加一个左边框，我尝试以下操作但它会删除所有左边框：

ul.footerLinks {
margin:0 auto;
li{
    display: inline-block;
    zoom:1;
    *display:inline;
    color:#eee;
    padding:4px 14px;
    border-top:1px solid rgba(0,0,0,0);
    border-left:1px solid #fff;
    &:hover {
        color:#fff;
        border-top:1px solid #fff;
    }
    &:first-child {
        border-left:none;
    }
}

}

我还尝试在右侧添加边框并使用:last-child，但结果相同，所有边框都消失了。

显然有什么不对吗？

Answer 1

您可以尝试以下内容。即使我是新人，只是想帮忙。

li{
        display: inline-block;
        zoom:1;
        *display:inline;
        color:#eee;
        padding:4px 14px;
        border-top:1px solid rgba(0,0,0,0);

        &:hover {
            color:#fff;
            border-top:1px solid #fff;
        }
       &:not(:first-child) {
        border-left:1px solid #fff;
    }
    }

或只是

    li{
            display: inline-block;
            zoom:1;
            *display:inline;
            color:#eee;
            padding:4px 14px;
            border-top:1px solid rgba(0,0,0,0);

            &:hover {
                color:#fff;
                border-top:1px solid #fff;
            }

        }

li:not(:first-child) {
     border-left:1px solid #fff;
}

Answer 2

也许如果您将li替换为ul（或ol，取决于您拥有的标记），则会删除第一个li的边框。

Answer 3

正如paulie_d所说，它确实有效，我在<a href="#"></a>之外有<li>，一旦我把它移到里面，它就可以了。

<nav role='navigation'>
   <ul class="footerLinks">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
   </ul>
</nav>

CSS .less文件中的第一个子选择器

3 个答案: