Question

如何在不向上一个列表项添加任何类的情况下使用CSS删除<ul>无序列表的最后<li>列表项的边框？

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>

Answer 1

添加此样式，您无需修改任何其他内容：

#navlist li:last-child { border-right:0px; }

编辑：

原始剧本

答案适用的原始脚本在此处发布，因为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>

Answer 2

我一直这样做，没有CSS3或JavaScript。您需要做的只是浮动li并使用高级选择器+：

<style>
ul li {
 float: left;
 border: none; }

li + li {
 border-left: 1px solid #F00; } 
</style>

这会使第一个li保持边框。

Answer 3

使用CSS3

删除<li>

中的最后一个<ul>

ul li:last-child { 
    border:none; 
  }

Answer 4

我会使用CSS来做所有事情，但在这种情况下使用:last-child在浏览器之间不兼容（我只遇到了IE问题）。

我毫不犹豫地使用JavaScript来帮助我设计风格，但只有CSS无法在所有浏览器上完成这一操作。

我看到两种方法可以做到这一点，第一种方法是建议在<li>列表中的每个<ul>添加一个类。这可以在服务器端完成，但我不是服务器端编码的专家，所以如果你使用jQuery，你可以编写这个简单的代码：

$("ul li:last-child").addClass("noborder");

这会将课程noborder添加到ul中的每个最后一项。 jQuery使用JavaScript CSS选择器引擎，以便您可以使用更复杂的选择器并使它们适用于所有浏览器。如果您有兴趣，请阅读独立引擎Sizzle。

您还可以为每个最后一项添加内联样式，但如果有效，我建议使用上面的代码。

使用$.css()，您可以直接在项目中添加样式;

$("ul li:last-child").css("border-right", "0");

它使用相同的选择器来查找项目。

如果您不喜欢使用jQuery，可以编写一个纯JavaScript代码来获得相同的效果，但为什么要这么麻烦呢？

Answer 5

您可以使用first-child，因为last-child属性来自CSS3。

#navlist li:first-child { border-left:0; }

检查以下链接： http://www.quirksmode.org/css/contents.html

现在检查代码：

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>

Answer 6

我会尝试jQuery，就像这样：

$("#myDiv ul li:last-child").addClass("lastLi");

您需要让lastLi类将li边框宽度设置为0.

以下是jQuery last-child选择器文档的链接：http://docs.jquery.com/Selectors/lastChild

Answer 7

像这样使用

li:nth-child(){ border-left:none;}

注意

将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>

如何使用CSS删除<ul>无序列表最后<li>列表项边框而不更改HTML代码中的任何内容？</li> </ul>

7 个答案:

原始剧本