:first-child と :first-of-type による要素選択
CSS では、疑似クラス :first-childと :first-of-type は両方とも、親要素内の位置に基づいて要素を選択します。ただし、「first」の定義方法が異なります。
Element:first-child
:first-child は、指定された親の最初の子要素を選択します。その要素タイプの。提供された例では:
このセレクターはすべての
に一致します。親要素の最初の子である要素。親要素に他の要素タイプが含まれている場合、それらは選択されません。
Element:first-of-type
:first-of-type は最初の要素を選択します親内の特定の要素タイプのインスタンス。最初の
と一致します。全体の最初の子ではない場合でも、要素。例:
div:first-of-type
ログイン後にコピー
提供された HTML:
<div class="parent">
<div>Child</div>
<h1>
ログイン後にコピー
:first-of-type は
を選択します。
の最初のインスタンスとしてクラス "parent" を使用します。
要素はID が「first」の場合、 の最初のインスタンスになります。 element.
主な違い
-
要素の階層: :first-child は子の順序に基づいて一致しますが、:first-of-要素タイプとそのタイプ内の位置に基づいてタイプが一致します。
-
数一致: :first-child は親ごとに 1 つの要素のみと一致しますが、:first-of-type は同じタイプの複数の要素と一致します。
-
特異性: :first- of-type は一般に :first-child よりも高い特異性を持ち、CSS で優先されることを意味します。 rules.
使用例
:first-child を使用して選択します:
- 最初順序なしリストのリスト項目: ul li:first-child
- のタイトルリスト内の最初のブログ投稿:article .blog-post:first-child h2
:first-of-type を使用して選択します:
- 文書内の最初の見出し (
、 など): 本文:first-of-type
- フォームの最初のボタン: form button:first-of-type
以上が:first-child と :first-of-type: 各 CSS 疑似クラスはいつ使用する必要がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
