使用最后一子选择(Using the last-child selector)

我的目标是申请的最后的CSS li ，但它没有做到这一点。

 #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; }

 <div id="refundReasonMenu"> <ul id="nav"> <li><a id="abc" href="#">abcde</a></li> <li><a id="def" href="#">xyz</a></li> </ul> </div>

我怎么可以只选择最后一个孩子？

Answer 1:

的:last-child伪类仍不能可靠跨浏览器使用。特别是，IE浏览器版本<9，和Safari <3.2绝对不支持的话，虽然Internet Explorer 7和Safari浏览器3.2 做支撑:first-child ，好奇地问。

最好的办法是将明确添加last-child （或类似）类，以该项目，并申请li.last-child来代替。

Answer 2:

这可能为你工作的另一个解决方案是反向的关系。所以，你会设置边框的所有列表项。然后，您可以先用孩子来消除边界的第一个项目。第一个孩子在所有浏览器都支持静态（这意味着它无法通过其他代码动态添加的，但第一胎是CSS2选择，而最后孩子在CSS3规范加）

注意：这仅适用您的预期，如果你只需要在列表中像你如2项的方式。任何第三个项目，并在将应用它们的边界。

Answer 3:

如果你认为你可以使用JavaScript，然后因为jQuery的支持， last-child ，你可以使用jQuery的CSS方法和好事，它将支持几乎所有的浏览器

示例代码：

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

您可以在这里进一步了解更多信息： http://api.jquery.com/css/#css2

Answer 4:

如果列表项的数量是固定的，你可以使用邻近的选择，例如，如果你只有三个<li>元素，你可以选择最后<li>有：

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}

Answer 5:

如果你发现自己经常想CSS3选择器，你可以随时使用selectivizr库在您的网站：

http://selectivizr.com/

这是一个JS脚本，增加了几乎所有的CSS3选择器的支持，将原本不支持它们的浏览器。

把它变成你的<head>使用IE条件标记：

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->

Answer 6:

最后孩子伪类没有在IE浏览器

CSS兼容性和Internet Explorer

IE7 CSS选择：他们怎么会失败

Answer 7:

作为替代使用，你可以使用一个详细清单一类，设置孩子DT元素有一个风格和孩子DD元素有另一个。你的榜样将成为：

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

HTML：

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

无论是法比其它更好，它只是个人喜好。

Answer 8:

另一种方式来做到这一点是使用jQuery中的最后一子选择器，然后使用的.css（）方法。厌倦虽然因为有些人仍然在使用JavaScript的浏览器禁用了石器时代。

Answer 9:

为什么边境不适用于UL的底部？

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}

Answer 10:

如果你是浮动的元素，你可以颠倒顺序

即float: right; 代替float: left;

然后用这个方法来选择一类的第一个孩子。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

这实际上是应用类，只是因为它现在是在相反的顺序的最后一个实例。

这是给你一个工作示例：

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>

Answer 11:

这很难说没有看到你的CSS的休息，但尝试添加!important在边框颜色的前面，使之像这样：

#refundReasonMenu #nav li:last-child
{
  border-bottom: 1px solid #b5b5b5 !important;
}

文章来源: Using the last-child selector