Question

假设我有一个 ul li结构，并且我想删除最后一个li边界，它也支持 IE 6 ，使用只有CSS （在我的项目中只使用css是强制性的。）

<ul>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
    <li>HI</li>
</ul>'

我想要一种在IE6中也可以使用的输出类型... enter image description here

Answer 1

由于支持IE6是一项要求，如果你不想使用Javascript或添加一个类（首选方法），你将不得不得到一点点kludgy。

目前还不清楚你的目标是什么，但这是一种保留子弹的方法。这假定边界已定义，您希望隐藏一个。您可以在overflow: hidden上设置<ul>，在margin-bottom: -1px设置<li>。这在IE6中运行得很好。

演示：

输出：

output

CSS：

li {
    border: 1px solid black;
    margin-bottom: -1px;
}

ul {
    overflow: hidden;
}

HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>

这是另一种方法，你只是不定义底部边框。

演示：

CSS：

li {
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}

HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>        
</ul>

Answer 2

您可以通过向最后一个li添加类来实现此目的，因为它不支持last-selector和+

另一个可能不是纯css的选项，但我认为它会有用，你可以使用jQuery，因为jQuery支持last-child

尝试

$(function(){
   $("ul li:last-child").css("border","none")
})

它将支持几乎所有的浏览器

除了有特殊要求外，考虑ie6也不是一个好主意。而Facebook和许多大网站都没有考虑ie6支票Browser Statistics ie6甚至没有 .5％所以我建议不要考虑ie6

Answer 3

下面是解决方案（在IE9的怪癖模式下测试，相当于IE6，但让我知道结果，我坚信它应该有效）：

<html>
<head>
  <style>
    ul li{
        border:1px solid red;
    }
    ul li.lastchild{
        border-bottom: 0px; // Or use "border: 0px;" if you completely 
                            // want to remove the border
    }
  </style>
</head>
<body>
    <ul>
        <li>HI</li>
        <li>HI</li>
        <li>HI</li>
        <li class="lastchild">HI</li>
    </ul>
</body>
</html>

Answer 4

经过长时间的研究后，我得到的结果是CSS中没有一个方法可以删除最后的li边框，这也适用于IE6 ......所以你必须在最后一个li元素上添加一个类或者你使用jquery删除最后的li边界.......

结果： - 只使用CSS你无法实现这个目标..........

有没有办法只使用CSS删除li最后一个子边框

4 个答案:

输出：

CSS：

HTML：

CSS：

HTML：