CSS last-child 选择器不起作用答案

【问题标题】：CSS last-child selector not workingCSS last-child 选择器不起作用
【发布时间】：2012-05-26 11:22:06
【问题描述】：

我正在尝试将样式应用于 div 中的最后一个 <p>。我想这样做而不添加新的类（或 ID）。

我尝试过使用最后一个子选择器，但它不起作用。

我什至尝试为我的所有 CSS 文档声明 p:last-child {font-style: italic;}，但这似乎没有任何效果。

这是我的 HTML：

<div class="new-section">
  <div class="collection-container">
    <div class="container">
      <div class="row">
        <div class="title span16">
          <h1>The Title</h1>
        </div>          
        <div class="span8">
          <p>Some text.</p>
          <p>This collection includes video, audio and essays.</p>
          <p>Visit now</p>
          <div class="arrow-right"></div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我的 LESS CSS：

.collection-container {
  height: 200px;
  position: relative;
  background-color: @gray;
  .container {
    padding-top: @r-margin;
    .title {
      margin-bottom: @xs-margin;
    }
    .span8 p:last-child {
      font-style: italic;
    }
  }
}

【问题讨论】：

span8 前面少了一个点
您的代码中是否真的缺少span8 类上的缺失点？
点实际上在我的代码中，谢谢！

标签： html css less css-selectors

【解决方案1】：

您的 css 无法正常工作，因为 p 标签不是 span8 的最后一个子标签。如果你改变 .span8 p:last-child {font-style: italic;} 到 .span8 p:nth-last-child(2) {font-style: italic;} 会起作用的

【讨论】：

【解决方案2】：

我认为你的语法是错误的。应该是……

.span8   p:last-child {font-style: italic;}

你错过了句号..

此外，如果您不担心使用 CSS3，您可以这样做...

.span8   p:nth-child(3) { }

这对于获取那些中间元素很有用。

【讨论】：

@Olly 用 JSFiddle 的链接查看我的答案，这样你就可以看到它在工作

【解决方案3】：

在您的情况下，您需要使用 p:last 或 p:last-of-type 选择器，因为 div.span8 的最后一个孩子是 div.arrow -正确而不是 p

【讨论】：

【解决方案4】：

这似乎是使用:last-of-type 的合适位置，在其父元素中选择最后一个p：

.span8 p:last-of-type {
  font-style: italic;
}

Demonstration

【讨论】：

【解决方案5】：

这是我删除冗余代码后的一个工作示例，向您展示它是如何工作的http://jsfiddle.net/RDpcM/1/

总是格式化您的代码并尝试分解尝试调试时重要的位是一个好主意。右括号很容易弄错，而且都是梨形的。

<div class="span8">

    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p>Visit now</p>

</div>

div p:last-child    {
     font-style: italic;
    border:solid 1px blue;

 }

[编辑 - 使用 JQuery]

如果您在 div.span8 中有其他元素并且不知道前面的元素数量，您可以引入一些 jquery 来实现所需的效果。

这是另一个小提琴：http://jsfiddle.net/VPbv2/

或者这将作为一个独立的示例供您试用。 JQuery 在文档加载时动态设置mySelected 类。

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.mySelected  {
    font-style: italic;
    border:solid 1px blue;
 }
</style>
<script type="text/javascript">
$(document).ready(function() {
    $("div.span8 > p:last").addClass("mySelected");
});
</script>
</head>
<body>
    <div class="span8">
        <p>Some text.</p>
        <p>This collection includes video, audio and essays.</p>
        <p>Visit now</p>
        <div>xxx</div>
    </div>
</body>
</html>

[编辑 - 非 JQuery]

您指出，当您拥有此代码时，原始答案将不起作用

<div class="span8">
    <p>Some text.</p>
    <p>This collection includes video, audio and essays.</p>
    <p>Visit now</p>

    <div> another non-P tag that will mess up the p:last-child selector</div>

</div>

所以你必须确保你的<p>标签没有任何其他兄弟姐妹，方法是将它们包装在像这样的额外div中

<div class="span8">
    <div class="only-for-p">
        <p>Some text.</p>
        <p>This collection includes video, audio and essays.</p>
        <p>Visit now</p>
    </div>

    <div> this non-P tag no longer messes with the p:last-child selector</div>

</div>

【讨论】：

嘿，这并不能完全解决问题，但非常有帮助。在我的示例中，最后一个孩子实际上是 div。在您的（正确的）jsfiddle 中，div 被删除并且代码有效。但是，我希望那里有div，这意味着last-child 可能不是合适的解决方案。有没有办法说“定位最后一个 p”而不是“定位最后一个孩子，如果它是一个 p”？
现在有点老套了，但是this will work in CSS3 如果您知道只有 *one" 额外的子元素，那么您可以使用 p:nth-last-child(2) 向后计数
如果你需要一个 CSS2 解决方案，你可以添加另一个 <div> 来包装 <p> 标签，这样你就知道不会有另一个孩子把它搞砸了。它是另一个嵌套级别，但它不应该损害您的布局，删除边距和填充
将ps 包装在div 中的聪明想法。回想起来如此明显。在这个有点 hacky 的例子中，n 是括号中参数中表示的数字吗？
在这两种情况下，这些建议都有效。极好的！谢谢你一直陪着我。在上面的答案中添加这些额外的建议是否有意义，然后我将其标记为正确？

【解决方案6】：

div.span8 p:last-child { font-style:italic; }

【讨论】：