子孫セレクターは、子や孫などを含むタグのすべての子孫を選択するために使用されますが、子孫セレクターは、指定された親の子孫タグ (指定されたタグ要素の最初の世代の子要素) のみを選択します。この記事では、CSS セレクターの子孫セレクターに関する関連情報を中心に詳しく紹介しています。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
子孫セレクターは、追加の記号 (山括弧 > ) を使用して 2 つの要素間の関係を示します。
例: body>h1 は、 タグ内の第 1 世代の
HTMLタグ関係図
HTMLコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
上記の構造を理解したら、次のコードを試すことができます:
CSSコード
上記の HTML コードには、合計 2 つの
内にあります。上記の CSS コードは、最初の
以下は、より興味深い子セレクターです
: first-child
最初の子タグを選択します。
CSS コード
1 2 3 |
|
このセレクターの機能は、まず Web ページ内のすべての
ここでは、の最初のタグが
の
の最初の子要素なので、
の
:last-child
このセレクターは :first-child セレクターに似ていますが、要素の最後の子を選択します。
CSSコード
1 2 3 |
|
「小さなリストC」と「リスト3(リンクあり)」のフォントサイズが大きくなっているのがわかります。これら 2 つの項目は最後に指定された項目であるためです。
:only-child
は、要素の唯一の子を選択します。
HTML コード
1 2 3 |
|
CSS コード
1 2 3 4 5 6 7 |
|
上記のスタイルは、最初の
の
要素にのみ適用されます。 2 番目の
には
要素だけでなく 要素も存在するため、2 番目の
このセレクターは使用がより複雑ですが、特に便利でもあります。
このセレクターは、テーブル内の行、リスト内の 2 つ離れた項目、またはその他の数の子孫要素のスタイルを簡単に定義できます。
このセレクターには、どの子孫が選択されるかを決定する値が必要です。
1 2 3 |
|
1 2 3 4 5 6 7 8 9 |
|
HTMLコード
1 2 3 4 5 6 |
|
この時の効果は
li:nth-child(odd) 的意思是找到
因为
使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过,:nth-child() 还有一些更妙更强大的用法。
可以给 :nth-child() 指定一个数字,精确选择某个子代。比如说要让第4个
HTML代码
1 2 3 4 5 6 7 8 9 |
|
CSS代码
1 2 3 |
|
同样的,这里的 li:nth-child(4) 的意思,是找到
如果HTML代码是下面这样,CSS代码不变的情况下。
HTML代码
1 2 3 4 5 6 7 8 9 10 |
|
效果就会变成这样:
会选中第3个
如果想每隔2个项目选中第三个项目,可以在数字后面加上字母n。
HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 |
|
CSS代码
1 2 3 |
|
每当遇到3的整数倍的那个元素,就会应用规定的样式。
如果想从第二个子代元素开始算起,选取每隔2个元素的第三个子代元素。可以在3n后面加个2。
HTML代码
1 2 3 4 5 6 7 8 9 10 11 12 |
|
CSS代码
1 2 3 |
|
如果想从第5个开始算起,每隔2个元素的第三个子代元素更改样式。
CSS代码
1 2 3 |
|
如果想反向遍历,n前面的倍数就要修改成负数。
CSS代码
1 2 3 |
|
意思是:从列表的第三个条目算起,选取在此之前的每个条目。
如果想从第4个元素开始,往下选取所有元素。可以这样写:
CSS代码
1 2 3 |
|
以下是子代选择符总览表
関連する推奨事項:
以上がCSSセレクタの子孫セレクタの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。