如何使用 CSS 删除 <ul> 无序列表的最后一个 <li> 列表项的边框而不更改 HTML 代码中的任何内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2004075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove <ul> unordered list's last <li> list item's border using CSS without changing anything in HTML code?
提问by Jitendra Vyas
How can I remove a <ul>unordered list's last <li>list item's border using CSS without adding any class to the last list item?
如何使用 CSS删除<ul>无序列表的最后一个<li>列表项的边框而不向最后一个列表项添加任何类？
See live example here: http://jsbin.com/umose
在此处查看现场示例：http: //jsbin.com/umose
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;
border-right:1px solid green;
}
#navlist li:last-child { border-right: ; }<p id="hello"></p>
<ul id="navlist" >
<li ><a href="#" id="current">Item one</a></li>
<li id="active"><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>回答by John K
Add this style and you don't need to modify anything else:
添加此样式，您无需修改任何其他内容：
#navlist li:last-child { border-right:0px; }
Edit:
编辑：
Original Script
原始脚本
Original script to which the answer applies is posted here because jsbin.com may delete content not viewed for 3 months.
答案适用的原始脚本在这里发布，因为jsbin.com可能会删除3个月未查看的内容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</body>
</html>
回答by Kevin
I do this all the time without CSS3 or JavaScript. All you need to do is float your liand use an advanced selector +:
我在没有 CSS3 或 JavaScript 的情况下一直这样做。您需要做的就是浮动li并使用高级选择器+：
<style>
ul li {
float: left;
border: none; }
li + li {
border-left: 1px solid #F00; }
</style>
This will keep the first lifrom having a border.
这将防止第一个li有边界。
回答by Gerard Banasig
Using CSS3
使用 CSS3
To remove the last <li>in a <ul>
删除最后<li>一个<ul>
ul li:last-child {
border:none;
}
回答by Einar ólafsson
I would use CSS to do everything, but in this case using :last-childis not compatible between browsers (I have only encountered IE problems).
我会使用 CSS 来做所有事情，但在这种情况下，使用:last-child在浏览器之间不兼容（我只遇到过 IE 问题）。
I don't hesitate to use JavaScript to help me style, but only where CSS can't do the trick on all browsers.
我会毫不犹豫地使用 JavaScript 来帮助我设计样式，但仅限于 CSS 无法在所有浏览器上发挥作用的地方。
I see two ways to do this, the first recommend adding a class to every last <li>inside a <ul>list.
This can be done server side, but I'm not an expert on server side coding, so if you use jQuery you can write this simple code:
我看到有两种方法可以做到这一点，第一种建议<li>在<ul>列表中的每个最后添加一个类。这可以在服务器端完成，但我不是服务器端编码的专家，所以如果您使用 jQuery，您可以编写以下简单代码：
$("ul li:last-child").addClass("noborder");
This will add the class noborderto every last item inside a ul. jQuery uses a JavaScript CSS selector engine so that you can use more complex selectors and get them to work on all browsers. You should read about the stand alone engine Sizzleif you are interested.
这会将类添加noborder到ul. jQuery 使用 JavaScript CSS 选择器引擎，因此您可以使用更复杂的选择器并让它们在所有浏览器上工作。如果您有兴趣，您应该阅读有关独立引擎Sizzle 的信息。
You could also add an inline style to every last item, but I recommend using the code above if it works.
您还可以为每个最后一项添加内联样式，但如果可行，我建议使用上面的代码。
Using $.css()you can add style directly to the item;
使用$.css()您可以直接为项目添加样式；
$("ul li:last-child").css("border-right", "0");
It uses the same selector to find the items.
它使用相同的选择器来查找项目。
If you don't like using jQuery it is possible to write a pure JavaScript code to get the same effect, but why bother?
如果您不喜欢使用 jQuery，则可以编写纯 JavaScript 代码来获得相同的效果，但何必呢？
回答by anglimasS
You can use first-childbecause the last-childproperty comes in CSS3.
您可以使用，first-child因为该last-child属性来自 CSS3。
#navlist li:first-child { border-left:0; }
Check below the link: http://www.quirksmode.org/css/contents.html
检查以下链接：http: //www.quirksmode.org/css/contents.html
Now check below the code:
现在检查下面的代码：
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-left:1px solid red
}
#navlist li:first-child{border-left:none}<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>回答by Indranil
Use like this
像这样使用
li:nth-child(){ border-left:none;}
Note
笔记
Put the liposition number (like 3 or 4 or 5) inside (); also manipulate border left or right.
将li位置编号（如 3 或 4 或 5）放在里面()；还操纵向左或向右边界。
div p { display:inline-block; background:darksalmon; padding:4px;
border-left:13px solid silver; }
div p:first-of-type { color:#fff; border-left:13px solid magenta; }
li { border-right:2px solid blue;
display:inline-block;padding:7px; background:skyblue;color:#fff;
}
ul li:nth-last-of-type(2) + li {
background:hsla(80,100%,60%,0.16);
border-right:none;
color:#000000;
} <h1>both universal solid style for
<i style='color:#1AB9FC'>Left or Right</i> border remove
</h1>
<div>
<h3 style="color:olive; text-align:center;">Target rightborder</h3>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<br>
<ul>
<li>li-1</li>
<li>li-2</li>
<li>li-3</li>
<li>li-4</li>
<li>li-5</li>
<li>li-6</li>
</ul>
<h3>Remove left border</h3>
<p><b>Note: </b><span>Last <code>li</code> always selected if you increase the <code>li</code> items in future</span></p>回答by James Lawruk
I would try jQuery, something like this:
我会尝试 jQuery，像这样：
$("#myDiv ul li:last-child").addClass("lastLi");
You would need to make the lastLiclass set the liborder width to 0.
您需要让lastLi该类将li边框宽度设置为 0。
Here is a link to the jQuery last-childselector documentation: http://docs.jquery.com/Selectors/lastChild
这是 jQuerylast-child选择器文档的链接：http: //docs.jquery.com/Selectors/lastChild
