Question

我正在尝试将样式应用到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;
    }
  }
}

Answer 1

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

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

Demonstration

Answer 2

这是我删除冗余代码后向您展示其工作原理的一个工作示例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>

Answer 3

我认为你的语法错了。应该......

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

你错过了这段时间..

此外，如果你不关心使用CSS3，你可以做...

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

这对于获取这些中间元素非常有用。

Answer 4

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

Answer 5

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

Answer 6

你的css无效，因为p标签不是span8的最后一个子节点。如果你改变 .span8 p:last-child {font-style: italic;} 至 .span8 p:nth-last-child(2) {font-style: italic;}它会起作用

CSS last-child选择器无法正常工作

6 个答案: