1 
<!DOCTYPE html>
<html>
<head>
<style> 
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>
</html>

質問：

私が変われば

p:last-child
    {
    background:#ff0000;
    }

に

:last-child
        {
        background:#ff0000;
        }

その後、ページ全体が赤くなりました。なぜ？p:last-childとはどう違い:last-childますか？

4

4 に答える 4

2

p:last-childpの場合は要素を選択しlast-childます。他の要素があるlast-child場合は失敗します

デモ

この場合、より厳密な擬似ライクを使用する必要があります

p:last-of-type {
   background:#ff0000;
}

デモ 2

上記は、親要素にpなる可能性のある他の要素に関係なく、最後の要素を選択します。last-child

このセレクターに来て:last-child、 はまったく具体的ではありません。何を指定していませんlast-childか? したがって、親要素が選択されますlast-child

そう

:last-child {
    background:#ff0000;
}

要素を選択iしますが、それはofではないため、同じように使用すると選択されますbodyplast-childbody:last-of-type

i bodyまたp、現在使用してlast-of-typeいるため、各要素の最後の要素が選択されます。

デモ

を使用firebugして各要素を検査し、要素がこれらのプロパティをどのように取得するかを確認できます。

于 2013-09-07T05:56:29.687 に答える
1

:last-childセレクターは、親の最後の子であるすべての要素を選択するためです。

于 2013-09-07T05:50:24.317 に答える
0

p:last-child段落要素の最後の子のみに CSS プロパティを適用することで機能します。

:last-childCSS プロパティを親要素の最後の子に適用することで機能します。この場合、body常に が 1 つあるため、最後の子は常に になりbodyます。:)

于 2013-09-07T05:51:52.570 に答える
0

デフォルトではすべての要素が選択されており、最初の要素は p 要素を指定することです。[Google翻訳]

于 2013-09-07T05:51:11.727 に答える