CSSセレクタの子孫セレクタの詳細説明

子孫セレクターは、子や孫などを含むタグのすべての子孫を選択するために使用されますが、子孫セレクターは、指定された親の子孫タグ (指定されたタグ要素の最初の世代の子要素) のみを選択します。この記事では、CSS セレクターの子孫セレクターに関する関連情報を中心に詳しく紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

子孫セレクターは、追加の記号 (山括弧 > ) を使用して 2 つの要素間の関係を示します。

例: body>h1 は、6c04bd5ca3fcae76e30b72ad730ca86d タグ内の第 1 世代の 4a249f0d628e2318394fd9b75b4636b1 タグをすべて選択します。

HTMLタグ関係図

HTMLコード

<h1>body里面的h1标题</h1>

<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>

<h2>body里面的h2标题</h2>

<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

上記の構造を理解したら、次のコードを試すことができます:

CSSコード

りー

上記の HTML コードには、合計 2 つの c1a436a314ed609750bd7c7d319db4da タグがありますが、6c04bd5ca3fcae76e30b72ad730ca86d には c1a436a314ed609750bd7c7d319db4da の子孫が 1 つだけあり、他の c1a436a314ed609750bd7c7d319db4da は e388a4556c0f65e1904146cc1a846bee 内にあります。上記の CSS コードは、最初の c1a436a314ed609750bd7c7d319db4da タグにのみ適用されます。

以下は、より興味深い子セレクターです

: first-child

最初の子タグを選択します。

CSS コード

body>h2 {
    color: orange;
}

このセレクターの機能は、まず Web ページ内のすべての c1a436a314ed609750bd7c7d319db4da タグを検索し、次に c1a436a314ed609750bd7c7d319db4da タグが配置されている場所を決定します。 c1a436a314ed609750bd7c7d319db4da タグは、親要素の中で 1 位にあるかどうかを示します。

ここでは、6c04bd5ca3fcae76e30b72ad730ca86dの最初のタグが4a249f0d628e2318394fd9b75b4636b1なので、6c04bd5ca3fcae76e30b72ad730ca86dの子要素c1a436a314ed609750bd7c7d319db4daは影響を受けません。

e388a4556c0f65e1904146cc1a846beeのc1a436a314ed609750bd7c7d319db4daはe388a4556c0f65e1904146cc1a846beeの最初の子要素なので、e388a4556c0f65e1904146cc1a846beeのc1a436a314ed609750bd7c7d319db4daはオレンジ色になります。

:last-child

このセレクターは :first-child セレクターに似ていますが、要素の最後の子を選択します。

CSSコード

h2:first-child {
    color: orange;
}

「小さなリストC」と「リスト3（リンクあり）」のフォントサイズが大きくなっているのがわかります。これら 2 つの項目は最後に指定された項目であるためです。

:only-child

は、要素の唯一の子を選択します。

HTML コード

li:last-child {
    font-size: 2em;
}

CSS コード

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

上記のスタイルは、最初の e388a4556c0f65e1904146cc1a846bee の e388a4556c0f65e1904146cc1a846bee 要素にのみ適用されます。 2 番目の e388a4556c0f65e1904146cc1a846bee には e388a4556c0f65e1904146cc1a846bee 要素だけでなく 3499910bf9dac5ae3c52d5ede7383485 要素も存在するため、2 番目の e388a4556c0f65e1904146cc1a846bee の e388a4556c0f65e1904146cc1a846bee 要素は上記のスタイルの影響を受けません。

このセレクターは理解するのが難しいです。このセレクターによって定義されたスタイルは、指定されたタグが別のタグの唯一の子孫である場合にのみ有効です。つまり、子孫に指定したタグが 1 つだけあるだけでは不十分です。指定したタグに他の兄弟タグがある場合、このセレクターで定義されたスタイルは無効になります。

:nth-child

このセレクターは使用がより複雑ですが、特に便利でもあります。

このセレクターは、テーブル内の行、リスト内の 2 つ離れた項目、またはその他の数の子孫要素のスタイルを簡単に定義できます。

このセレクターには、どの子孫が選択されるかを決定する値が必要です。

最も単純な値はキーワード、つまり奇数と偶数です。

1. odd は、奇数番目の子孫要素を選択するために使用されます。

2. even は、偶数の子孫要素を選択するために使用されます。

HTMLコード

p:only-child {
    color: orange;
}

CSSコード

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

最初の子要素のインデックスは1です。

最初の

の前に他の要素がある場合、最初の

の添字は 1 にならないことに注意してください。
例えば

HTMLコード

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

この時の効果は

li:nth-child(odd) 的意思是找到25edfb22a4f469ecb59f1190150159c6元素的父元素，通过父元素来检测每一个25edfb22a4f469ecb59f1190150159c6的下标的奇偶。

因为ff6d136ddc5fdfeffaf53ff6ee95f185的第一个元素是3499910bf9dac5ae3c52d5ede7383485，第二个元素才是25edfb22a4f469ecb59f1190150159c6。也就是说，第一个25edfb22a4f469ecb59f1190150159c6的下标是2，所以第一个下标赋的样式是绿色的背景。

使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。

可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个25edfb22a4f469ecb59f1190150159c6的背景色改成橙色。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(4) {
    background: orange;
}

同样的，这里的 li:nth-child(4) 的意思，是找到25edfb22a4f469ecb59f1190150159c6标签的父元素，然后查找父元素的第4个子元素。

如果HTML代码是下面这样，CSS代码不变的情况下。

HTML代码

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

效果就会变成这样：

会选中第3个25edfb22a4f469ecb59f1190150159c6。因为第3个25edfb22a4f469ecb59f1190150159c6在其父元素里面是排第4的。

如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n) {
    background: orange;
}

每当遇到3的整数倍的那个元素，就会应用规定的样式。

如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n+2) {
    background: orange;
}

 

如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。

CSS代码

li:nth-child(3n+5) {
    background: orange;
}

如果想反向遍历，n前面的倍数就要修改成负数。

CSS代码

li:nth-child(-n+3) {
    background: orange;
}

意思是：从列表的第三个条目算起，选取在此之前的每个条目。

如果想从第4个元素开始，往下选取所有元素。可以这样写：

CSS代码

li:nth-child(n+4) {
    background: orange;
}

以下是子代选择符总览表

関連する推奨事項:

効率的な​​ CSS セレクターの作成方法

CSS セレクターの定義と使用法の概要

CSS セレクター

以上がCSSセレクタの子孫セレクタの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。