Question

我的目标是在最后li上应用CSS，但它没有这样做。

#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伪类仍无法在浏览器中可靠地使用。特别是，Internet Explorer版本＆lt; 9，Safari＆lt; 3.2肯定是don't support it，虽然Internet Explorer 7和Safari 3.2 支持:first-child，但是很奇怪。

您最好的选择是向该项明确添加last-child（或类似）类，然后应用li.last-child。

Answer 2

另一种可能对您有用的解决方案是扭转这种关系。因此，您将为所有列表项设置边框。然后，您将使用first-child来消除第一个项目的边框。所有浏览器都支持第一个子节点（这意味着它不能通过其他代码动态添加，但是first-child是CSS2选择器，而最后一个子节点是在CSS3规范中添加的）

注意：如果列表中只有2个项目（如示例），则此方法仅适用于您的预期方式。任何第3项和第3项都将应用边框。

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选择器，您可以随时使用您网站上的选择性库：

http://selectivizr.com/

这是一个JS脚本，它将几乎所有CSS3选择器的支持添加到浏览器中，否则它们将无法支持它们。

使用IE条件将其丢入<head>标记：

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

Answer 6

last-child伪类在 IE

中不起作用

CSS Compatibility and Internet Explorer

IE7 CSS Selectors: How they fail

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中使用last-child选择器，然后使用.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;
}

这实际上只是将类应用于LAST实例，因为它现在是颠倒的顺序。

以下是您的工作示例：

<!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;
}

使用最后一个子选择器

11 个答案: