0

私はそれを数回試しましたが、次のことが起こるたびに::last-childセレクターを使用すると、ドキュメントの最後の子のみが選択され、セレクターはドキュメントの最初のすべて:first-childの子を選択します。誰かが私に理由を説明できますか? 例:


：第一子

<style>
p:first-child {background: pink;}
</style>
<body>
<p> This is the first child of the body so the background color is pink </p>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<div>
<p> This is the first child of the div so the background color is also pink </p>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
</div> 
</body>

：最後の子

<style>
p:last-child {background: pink;}
</style>
<body>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<p> I expect that this will have a pink background but it won't :( Why? </p>

<div>
<p> This is some text in a paragraph </p>
<p> This is some text in a paragraph </p>
<p> This is the last child of div and only this paragraph has a pink background </p>
</div> 
</body>

ありがとう！

4

2 に答える 2

4

セレクターを使用する:last-childと、ドキュメントの最後の子のみが選択されますが、セレクターはドキュメントの最初のすべて:first-childの子を選択します。

それは真実ではない。どちらも、ドキュメント内の親の最後と最初のすべての子をそれぞれ選択します。「最後の子」と「最初の子」の意味を誤解しているか、ページの構造を誤解しています。

p:first-childdiv の最初の子との最初の子bodyは両方とも要素であるため、ここでは 2 つの要素に一致しpます。

p:last-childdivyour の最後の子が aであるため、1 つの要素にのみ一致しますがp、の最後の子bodyはthatdivであり、 a ではありませんp。

HTML を少しインデントすると、これがより明確になります。

<body>
  <p></p>   <!-- First child of body is p -->
  <p></p>
  <p></p>
  <div>     <!-- Last child of body is div -->
    <p></p> <!-- First child of div is p -->
    <p></p>
    <p></p> <!-- Last child of div is p -->
  </div> 
</body>

前述のように、最初と最後のp要素を選択しようとしていた可能性があります。その場合は、代わりにp:first-of-typeandを使用する必要がありp:last-of-typeます。

于 2012-11-17T08:47:03.687 に答える
2

p:last-child親の最後の子である要素を選択pするため、その後に兄弟要素はありません。の後には、前の兄弟ではない最後の子である<p> I expect that this will have a pink background but it won't :( Why? </p>a が続きます。divp

:last-of-typeあなたが望むのは疑似クラスだと思います。p:last-of-type {background: pink;}必要な要素を選択します。

于 2012-11-17T08:26:27.707 に答える