jqueryセレクター:first-childおよび:last-childは要素の解決策を取得できません

実際のコード例を通してこの問題を解決する方法を紹介しましょう。次の HTML コードがある場合

<a href="#" class="button"><</a>
<a href="#" class="button">></a>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>

クラス ボタンを持つ最後の a タグを見つける必要がある場合、CSS3擬似クラス についての知識に従って、次のコードを簡単に書くことができます

.button:last-child {
    background-color: #ffd700;
}

何度か実行した後、2番目のaの背景色が変わっていないことがわかりました。CSSコードは正しいはずです。変更点は、HTML と CSS をこれに変更するだけです。

<div>
<a href="#" class="button"><</a>
<a href="#" class="button">></a>
</div>
<div id="f">F</div>
<div id="s">S</div>
<div id="t">T</div>
<style>
div .button:last-child {
    background-color: #ffd700;
}
</style>

そのとき、first-child と last-child は確かに非常に傲慢で故意であることに気づきました。親要素内の子要素に他の異なるタグが含まれている場合、それらは非常に不従順になります。

概要

では、彼らは何を聞き、何を聞かなかったのでしょうか? いくつかのテストの後、私は次の結論に達しました。

first を使用する場合、最初のサブ要素は同じラベルを持つ必要があります。真ん中と最後は異なっていても構いません、
最後は逆です、最後の要素は同じである必要があります、前と真ん中は異なっていても構いません

上記は、Yunqiコミュニティの編集者があなたのために慎重に準備したコンテンツです。ブログ、Q&A、および公開アカウント、キャラクター、コース、その他のコラムにも関連するコンテンツがあります。引き続き右上隅の検索ボタンを使用してCSSを検索してください。タグコードはfirstchild lastchildです。 , jquery last child, jquery firstchild, jquery first child, jquery first last, 便宜上、より関連性の高い知識が得られます。

以上がjqueryセレクター:first-childおよび:last-childは要素の解決策を取得できませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。