CSS 隣接兄弟セレクターを使用する場合-CSSチュートリアル-php.cn

CSS 隣接兄弟セレクターを使用する場合

(*-*)浩

リリース： 2019-12-30 16:16:43

オリジナル

3187 人が閲覧しました

CSS 隣接兄弟セレクターを使用する場合

隣接兄弟セレクターは、別の要素の直後の要素を選択でき、両方とも同じ親要素 を持ちます。

隣接する兄弟を選択 # 両方に同じ親要素がある場合は、隣接兄弟セレクターを使用できます。

たとえば、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 番目の要素だけであることに注意してください。次のセレクターを見てください: