ホームページ  >  記事  >  ウェブフロントエンド  >  CSSコンテキストセレクターにはどのような種類がありますか?

CSSコンテキストセレクターにはどのような種類がありますか?

青灯夜游
青灯夜游オリジナル
2022-01-20 10:43:021881ブラウズ

CSS コンテキスト セレクターには 4 つのタイプがあります: 1. 現在の要素のすべての子孫要素を選択できる子孫セレクター; 2. 現在の要素のすべての子要素を選択できる親子セレクター; 3. . 兄弟セレクター 隣接セレクターは、共通の親を持つ隣接する要素を選択できます; 4. 同じレベルのすべてのセレクターは、共通の親を持つ後続の要素をすべて選択できます。

CSSコンテキストセレクターにはどのような種類がありますか?

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

css のコンテキスト セレクター

コンテキスト セレクターは、「親子」つまり階層関係を構成する要素のグループであり、その関係によってスタイルが設定されます

  • html ドキュメントは逆さまの「ツリー」のように見えるため、階層構造になっています。

  • ドキュメント内のすべての要素には独自の位置があり、つまり、コンテキスト関係

  • #したがって、要素のコンテキスト関係に基づいてそれらを取得できます。要素の役割

シリアル番号

役割説明先祖要素子要素、孫要素などを含むすべてのレベルに子孫要素があります。子要素レベルのみを持つ要素他のレベル要素とともに共通の祖先要素他の兄弟要素と共通の親要素を持つ#4 種類のコンテキスト セレクターシリアル番号
##1
2 親要素
3 子孫要素
4 子要素

SelectorOperator

説明例1子孫セレクターSpace現在の要素のすべての子孫要素を選択します, #2 現在の要素のすべての子要素を選択3兄弟隣接セレクター共通の要素を持つ要素を選択します親であり、隣接している #li.red liすべてのセレクターが同じレベルにあります#li.red ~ li)
div pbody * 親子セレクター>
div > h2
##4 ##共通の親を持つ後続の要素をすべて選択します
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>上下文选择器</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      /* 类选择器 */
      .item {
        font-size: 2rem;
        background-color: lightskyblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      /* 后代选择器 */
      .container div {
        border: 1px solid coral;
      }
      /* 父子选择器,只有外层的div受影响 */
      body > div {
        border: 3px solid green;
      }
      /* 使用后代选择器模拟父子选择器 */
      /* body div.container {
        border: 3px solid green;
      } */
      /* 同级相邻选择器 */
      /* 选择与第5个相邻的,即后面的"一个"元素 */
      /* .item.center + .item {
        background-color: lightgreen;
      } */
      /* 同级所有选择器 */
      /* 选择与第5个后面的,有共同父级的所有兄弟元素 */
      .item.center ~ .item {
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div class="item center">5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル

以上がCSSコンテキストセレクターにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。