CSS3リレーションシップセレクターの種類は何ですか?-フロントエンドQ&A-php.cn

CSS3リレーションシップセレクターの種類は何ですか?

青灯夜游

リリース： 2021-12-15 16:31:17

オリジナル

3772 人が閲覧しました

css3 リレーションシップセレクターには 4 つのタイプがあります: 1. 包含セレクター "E F" は E 要素に含まれるすべての F 要素を選択します; 2. 子孫セレクター "E>F" は E であるすべての要素を選択します直接の子要素 F; 3. 隣接セレクター "E F" は E 要素の直後の F 要素を選択します; 4. 兄弟セレクター "E~F"。

CSS3リレーションシップセレクターの種類は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS3 のリレーションシップセレクターには、主にセレクター、子孫セレクター、隣接セレクター、兄弟セレクターが含まれます。

インクルードセレクタースペース " " で接続されます。セレクターは次のとおりです。記号「
兄弟セレクターは記号「
」で接続されています

以下で詳しく説明していきます。
包含セレクター (E F)
E 要素に含まれるすべての F 要素をスペースで区切って選択します
```
ul li{color:green;}

<ul>
  <li>宝马</li>
  <li>奔驰</li>
</ul>
<ol>
  <li>奥迪</li>
</ol>
```
ログイン後にコピー

CSS3 子孫セレクター (E>F)

子孫セレクターは、主に要素の第 1 レベルの子要素を選択するために使用されます。たとえば、h1 要素の子のみである強い要素を選択する場合は、「h1>strong」と記述できます。

以下では、図に示すように、ケースを使用して子孫セレクター (>) の使用法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3子代选择器用法</title>
    <style>
        h1 > strong {
            color: red;
            font-size: 20px;
            font-family: "微软雅黑";
    　  }
    
    </style>
</head>
<body>
    <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
　  <h1>PHP<em><strong>中文网</strong></em>欢迎你！</h1>
</body>
</html>

ログイン後にコピー

上記のコードでは、15 行目の強い要素が、 code は h1 要素の子要素であり、コードの 16 行目のstrong 要素は h1 要素の孫要素であるため、コードに設定されたスタイルはコードの 15 行目でのみ有効です。

CSS3 兄弟セレクター (E F)

このセレクターは、プラス記号 " " を使用して前後の 2 つのセレクターをリンクします。セレクター内の 2 つの要素は同じ親を持ち、2 番目の要素は最初の要素のすぐ後に続く必要があります。

以下では、事例を使用して隣接兄弟セレクターの使用法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3紧邻兄弟选择器用法</title>
    <style type="text/css">
        p + h2{
            color: green;
            font-family: "宋体";
            font-size: 20px;
       }

    </style>
</head>
<body>
　<body>
　  <h2>《赠汪伦》</h2>
　  <p>李白乘舟将欲行，</p>
　  <h2>忽闻岸上踏歌声。</h2>
　  <p>桃花潭水深千尺，</p>
　  <h2>不及汪伦送我情。</h2>
</body>

ログイン後にコピー

上記のコードでは、7 行目から 11 行目は、p 要素の直後にある最初の兄弟要素 h2 のスタイルを定義するために使用されます。構造からわかるように、p 要素の直後の最初の兄弟要素の位置はコードの 17 行目であるため、コードの 17 行目のテキスト内容が定義されたスタイルで表示されます。

CSS3リレーションシップセレクターの種類は何ですか?

#画像からわかるように、p 要素の直後にある h2 要素のみに、コードで設定されたスタイルが適用されています。

CSS3 隣接セレクター(E~F)

通常の兄弟セレクターは前後の2つのセレクターを「～」で結びます。指定された要素の背後にあるすべての兄弟ノードを検索します。

以下では、以下に示すように、ケースを使用して通常の兄弟セレクターの使用法を示します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3普通兄弟选择器~用法</title>
    <style type="text/css">
        p ~ h2{
            color: pink;
            font-family: "微软雅黑";
            font-size: 20px;
       }
    </style>
</head>
<body>
　<body>
    <h2>《赠汪伦》</h2>
    <p>李白乘舟将欲行，</p>
    <h2>忽闻岸上踏歌声。</h2>
    <h2>桃花潭水深千尺，</h2>
    <h2>不及汪伦送我情。</h2>
</body>
</html>

ログイン後にコピー

CSS3リレーションシップセレクターの種類は何ですか?