ホームページ > 記事 > ウェブフロントエンド > CSS 隣接兄弟セレクターを使用する場合
CSS 隣接兄弟セレクターを使用する場合
- (*-*)浩オリジナル
- 2019-12-30 16:16:433081ブラウズ
隣接兄弟セレクターは、別の要素の直後の要素を選択でき、両方とも同じ親要素 を持ちます。
隣接する兄弟を選択 # 両方に同じ親要素がある場合は、隣接兄弟セレクターを使用できます。
たとえば、h1 要素の直後に表示される段落の上マージンを増やしたい場合は、次のように記述できます。<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>
<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>このセレクターは次のようになります。 h1 要素の後に表示される段落の直後を選択します。h1 要素と p 要素には共通の親要素があります。
文法説明:隣接兄弟セレクターは、隣接兄弟コンビネータであるプラス記号 ( ) を使用します。
注:サブ組み合わせシンボルと同様に、隣接する兄弟組み合わせシンボルの隣に空白文字を置くことができます。
次のドキュメント ツリーの断片を見てください:
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>上の断片では、 div 要素に 2 つのリストが含まれています: 順序なしリストと順序付きリストです。それぞれのリストは3 つのリスト項目が含まれています。リスト項目自体と同様に、2 つのリストは隣接する兄弟です。 ただし、最初のリストのリスト項目と 2 番目のリストのリスト項目は、隣接する兄弟ではありません。これは、2 セットのリスト項目が同じ親要素に属していないためです (これらはいとこであるとしか考えられません)。せいぜい）。
結合器を使用して選択できるのは、2 つの隣接する兄弟の 2 番目の要素だけであることに注意してください。次のセレクターを見てください:li + li {font-weight:bold;}上記のセレクターは、リスト内の 2 番目と 3 番目のリスト項目のみを太字にします。最初のリスト項目は影響を受けません。
以上がCSS 隣接兄弟セレクターを使用する場合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。