5

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

我试过使用 last-child 选择器，但它不起作用。

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

这是我的 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;
    }
  }
}
4

6 回答 6

9

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

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

示范

于 2014-03-06T23:39:03.983 回答
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/

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

<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>
于 2012-05-18T22:40:12.743 回答
4

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

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

你错过了期间..

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

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

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

于 2012-05-18T21:56:13.737 回答
2

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

于 2016-02-03T06:12:43.240 回答
0 
div.span8 p:last-child { font-style:italic; }
于 2012-05-18T22:01:17.483 回答
0

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

于 2017-05-23T07:34:49.443 回答