5

<p>divの最後にスタイルを適用しようとしています。新しいクラス（または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;
    }
  }
}
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/

または、これは試してみるためのスタンドアロンの例として機能します。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>
于 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

あなたの場合、div.span8の最後の子はpではなくdiv.arrow-rightであるため、p:lastまたはp:last-of-typeセレクターのいずれかを使用する必要があります

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

pタグがspan8の最後の子ではないため、CSSが機能していません。に変更 .span8 p:last-child {font-style: italic;} する .span8 p:nth-last-child(2) {font-style: italic;}と動作します

于 2017-05-23T07:34:49.443 に答える