35

如果我有ul，如何在li除最后一个项目之外的所有项目上设置边框底部？我也在尝试制作border180px 的宽度。这是我的代码：

HTML

<ul class="sideNav">
  <li><a href="/history.asp">History</a></li>
  <li><a href="/mission.asp">Mission</a></li>
  <li><a href="/associations.asp">Associations</a></li>
  <li><a href="/careers.asp">Careers</a></li>
</ul>

CSS

.sideNav {
    margin:0;
    padding:0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    width:216px;
    background-color:#017dc6;
}

.sideNav li {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    width:180px;
}

.sideNav li a {
    border-bottom:1px solid #80bee3;
    width:180px;
    color:#ffffff;
    text-decoration:none;
    display:block;
    padding:18px;
}
4

4 回答 4

91

2018 年 12 月 13 日：请注意，在当今的现代浏览器中无需使用此解决方案。您应该随意使用我下面的答案li:not(:last-child) { border-bottom: 1px solid red; }

不使用 JavaScript 也不必支持 IE7 及更低版本（IE8 在第二个失败），您可以使用三个选项：:first-child和:lastchild选择+器：

：第一个孩子

li { border-top: 1px solid red; }
li:first-child { border-top: none; }

：最后一个孩子

li { border-bottom: 1px solid red; }
li:last-child { border-bottom: none; }

+ 选择器

li+li { border-top: 1px solid red; }

如果您需要支持 IE8 并且您的设计不允许您在元素的顶部而不是底部放置边框，则会出现问题。

编辑： 宽度问题的解决方法是，将 180px 添加到a元素的 2*18px 中，删除左右填充，然后设置padding: 18px 0;，你会是金色的。（更新的jsfiddle：http: //jsfiddle.net/NLLqB/1/）

这是它的一个jsfiddle：http: //jsfiddle.net/NLLqB/

于 2013-10-12T01:53:08.687 回答
28

使用:not(:last-child).

.sideNav li:not(:last-child) a {
    /* your css here */
}
于 2013-10-12T01:32:22.087 回答
2

一种方法：您可以使用以下规则覆盖最后一个：last-child（因为您标记了css3）：

.sideNav li:last-child a {
    border-bottom:0px; /*Reset the border for the anchor of last li of this ul*/
}

演示

IE8 有可用的 polyfill，但如果您可以为最后一个提供类名并对其应用规则以重置样式，则将得到更好的支持，而不是使用 css3（如果您也打算支持旧浏览器）。

如果您使用像 jquery 这样的脚本语言，您可以轻松地将一个类添加到最后一个孩子，因为 jquery 负责跨浏览器的兼容性。

于 2013-10-12T01:26:08.993 回答
-3

您也可以使用内联 CSS 来纠正此问题。

<li><a style="border-bottom:none" href="/careers.asp">Careers</a></li>

这将从“职业”链接中删除边框。请注意，仅当您将该代码放入标签中时它才会起作用，<a>因为这是应用边框的内容，而不是<li>.

这样做的缺点是，如果您向列表中添加某些内容，则倒数第二个列表项将没有底部边框，而最后一个将没有底部边框。

不是最好的解决方案，而是完成同样事情的替代方案。干杯!

于 2016-01-19T23:11:33.703 回答