CSS の階層セレクターとは何ですか?使い方？-CSSチュートリアル-php.cn

CSS の階層セレクターとは何ですか?使い方？

青灯夜游

リリース： 2022-08-03 10:18:48

転載

3218 人が閲覧しました

前回の記事「CSSの基本セレクターを詳しく解説してセレクターの優先順位について語る」ではCSSの基本セレクターについて学びましたが、今回は階層選択についてお話します。皆さんのお役に立てば幸いです!

CSS の階層セレクターとは何ですか?使い方？

レベルセレクター

CSSレベルセレクターは、HTML ノードツリー間の関係に基づいて提供されるセレクターの使用法です。 レベルセレクター を学ぶには、まず HMTL 要素間の関係がどのようなものかを理解する必要があります。 [推奨される学習: css ビデオチュートリアル ]

最初に次の HTML コードを見てください:

nbsp;html>



    <meta>
    <meta>
    <title>HTML测试代码</title>



    <div>
        <p></p>
        <p></p>
    </div>
    <div>
        <span></span>
        <button></button>
        <span></span>
    </div>

ログイン後にコピー

上記のコードは、次のノードツリーに描画できます。下の図

CSS の階層セレクターとは何ですか?使い方？

次に、HTML 要素間の関係を見てみましょう。HTML ページ内の要素間には、以下に示す 3 つの関係があります。

: 上記のコードでは、左側の 
要素は
## 親です は # 要素の子要素であり、逆に  は <div> の子要素です。もちろん、このような親子構造は他にもたくさんあります。 <code>
兄弟間の関係
: 上記のコードコードでは、 要素と # が # # 要素は兄弟要素であり、 要素と
: 上記のコードコードでは、
要素は
要素の子孫要素、逆に 要素は
要素の祖先要素です。

HTML 要素間の 3 つの関係に従って、CSS 階層セレクターは次の 4 つを提供します。

子孫セレクター: 要素を祖先要素として扱い、この要素のすべての子孫要素を検索します。

子セレクター: 要素を親要素として扱い、この要素のすべての子要素を検索します。
#隣接する兄弟セレクター: 要素をターゲット要素として使用し、ターゲット要素と同じ親要素を持つ次に指定された要素を検索します
Ordinary 兄弟セレクター: 特定の要素をターゲット要素として受け取り、ターゲット要素と同じ親要素を持つ指定された要素を検索します。
セレクター

親子関係を示す山括弧 (
>
)
隣接する兄弟間の関係を示すプラス記号 (
)
兄弟間の関係を示すチルダ (~)
)
Web 開発では、最初の 2 つである 子孫セレクター
と

最初にコードの一部を見てみましょう:

<!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>使用CSS3层次选择器</title>
            <style type="text/css">
              * {margin:0;padding:0;}
              body {width: 300px; margin:0 auto;}
              div{margin:5px;padding:5px;border:1px solid #ccc;}
            </style>
          </head>
          <body>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4
              <div>5</div>
              <div>6</div>
            </div>
            <div>7
              <div>8
                <div>9
                  <div>10</div>
                </div>
              </div>
            </div>
          </body>
        </html>

ログイン後にコピー

CSS の階層セレクターとは何ですか?使い方？

body div { background-color: yellow; }

ログイン後にコピー

ここでは、body要素の子孫であるdiv要素の背景色を黄色に設定しています。つまり、すべての div が黄色に染まります。

CSS の階層セレクターとは何ですか?使い方？

body > div { background-color: red; }

ログイン後にコピー

この設定の後、本文の下の第 1 レベルの div 要素 (ここではコンテンツ 1、2、3、4、および 7 を持つ div 要素) の背景色が赤に設定されます。

CSS の階層セレクターとは何ですか?使い方？

.active + div { background-color: green; }

ログイン後にコピー

ここでは、2 番目の div 要素である .active セレクターの隣接する兄弟ノードを設定し、その背景色を緑色に設定します。

CSS の階層セレクターとは何ですか?使い方？

比如使用下面的代码，影响到的样式：

.active ~ div { background-color: pink; }

ログイン後にコピー

这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。

CSS の階層セレクターとは何ですか?使い方？

（学习视频分享：web前端入门）

CSS の階層セレクターとは何ですか?使い方？

レベル セレクター

レベルセレクター