如何删除<；ul>；无序列表'；s last<；李>；列表项'；在HTML代码中使用CSS而不更改任何内容？_Html_Css_Xhtml

如何删除<；ul>；无序列表'；s last<；李>；列表项'；在HTML代码中使用CSS而不更改任何内容？

html css

如何删除<；ul>；无序列表'；s last<；李>；列表项'；在HTML代码中使用CSS而不更改任何内容？,html,css,xhtml,Html,Css,Xhtml,如何使用CSS删除无序列表的最后一个列表项的边框，而不向最后一个列表项添加任何类请参见此处的实时示例： body{背景色：#fff；字体：16px Helvetica，Arial；颜色：#000；} 锂 { 显示：内联；列表样式类型：无；填充：0 20px 0 20px；右边框：1px纯绿色； } #navlist li:最后一个子项{右边框：；} 我会尝试jQuery，类似这样： $("#myDiv ul li:last-child").addClass("lastLi

如何使用CSS删除无序列表的最后一个

列表项的边框，而不向最后一个列表项添加任何类
请参见此处的实时示例：

body{背景色：#fff；字体：16px Helvetica，Arial；颜色：#000；}
锂
{
显示：内联；
列表样式类型：无；
填充：0 20px 0 20px；
右边框：1px纯绿色；
}
#navlist li:最后一个子项{右边框：；}







我会尝试jQuery，类似这样：
$("#myDiv ul li:last-child").addClass("lastLi"); 

您需要使lastLi
类将li
边框宽度设置为0
这里有一个链接，指向jQuerylast child
选择器文档：
使用CSS3
删除

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

添加此样式，您无需修改任何其他内容：
#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>


沙箱
正文{背景色：#fff；字体：16px Helvetica，Arial；颜色：#000；}
#李海军
{
显示：内联；
列表样式类型：无；
填充：0 20px 0 20px；右边框：1px实心红色；
}
/* !!!!!!!!!!!!!! 将答案粘贴到此处以进行修复*/
你好，来自JS-Bin








我一直在没有CSS3或JavaScript的情况下这样做。您只需浮动li
并使用高级选择器+
：
<style>
ul li {
 float: left;
 border: none; }

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


ulli{
浮动：左；
边框：无；}
李+李{
左边框：1px实心#F00；}

这将防止第一个li
具有边框。
我会使用CSS来完成所有操作，但在这种情况下，使用：最后一个子项在浏览器之间不兼容（我只遇到过IE问题）
我毫不犹豫地使用JavaScript来帮助我设计风格，但仅限于CSS无法在所有浏览器上实现的地方
我认为有两种方法可以做到这一点，第一种建议在
列表中的每一个中添加一个类。
这可以在服务器端完成，但我不是服务器端编码方面的专家，因此如果使用jQuery，您可以编写以下简单代码：
$("ul li:last-child").addClass("noborder");

这将向ul
中的每一项添加类noborder
。jQuery使用JavaScript CSS选择器引擎，这样您就可以使用更复杂的选择器，并让它们在所有浏览器上工作。如果您感兴趣，应该阅读有关独立引擎的内容
您还可以为每一项添加一个内联样式，但是如果可以的话，我建议使用上面的代码
使用$.css（）
可以直接向项目添加样式
$("ul li:last-child").css("border-right", "0");

它使用相同的选择器来查找项目
如果您不喜欢使用jQuery，那么可以编写一个纯JavaScript代码来获得相同的效果，但是为什么要麻烦呢？
您可以使用第一个孩子
，因为最后一个孩子
属性在CSS3中
#navlist li:first-child { border-left:0; }

请检查以下链接：

现在检查下面的代码：

body{背景色：#fff；字体：16px Helvetica，Arial；颜色：#000；}
#李海军
{
显示：内联；
列表样式类型：无；
填充：0 20px 0 20px；左边框：1px实心红色
}
#navlist li:第一个子项{左边框：无}
你好，来自JS-Bin







像这样使用
li:nth-child(){ border-left:none;}

注意
将li
位置号（如3、4或5）放入（）
；也可以左右操纵边框

divp{display:内联块；背景：暗萨尔蒙；填充：4px；
左边框：13px纯银；}
分区p：类型{color:#fff；左边框：13px实心品红色；}的第一个
li{右边框：2px纯蓝色；
显示：内联块；填充：7px；背景：天蓝色；颜色：#fff；
}
ul li：类型（2）+li的最后第n个{
背景：hsla（80100%，60%，0.16）；
边界权：无；
颜色：#000000；
}
两种通用实体样式
删除左边框或右边框
目标右边界
第一段
第二段
第三段
第四段



li-1
li-2
李-3
li-4
li-5
li-6

删除左边框
注意：如果将来增加li
项，则最后一个li
始终处于选中状态
我想知道是否存在任何纯css方式可能存在兼容性问题，请参阅Ouch，IE6。。。如果它不支持相同级别的CSS标准，您可能必须切换到不同的解决方案，例如在最后一个列表项中添加一个类，即使您不想这样做。其他人是否有与原始问题一致的IE6解决方案？为什么不使用此答案来制定一个基于IE6和CSS的全新SO问题（将IE6放在新问题的标题中）-您将得到更具体的答案，不应将其视为重复。很好。从来没有想过这样做。+
也被称为相邻同级选择器。我的问题是最后一个child@JitendraVyas-是的，我知道，但最后一个孩子不支持css3属性的较低版本ie bcz。所以我有一些技巧。只是我的建议。