「+」CSSセレクターとは何ですか?-フロントエンドQ&A-php.cn

「+」CSSセレクターとは何ですか?

青灯夜游

リリース： 2022-11-24 20:41:28

オリジナル

2640 人が閲覧しました

CSS では、「」は隣接する兄弟要素セレクターであり、別の要素の直後の要素を選択するために使用され、それらは同じ親要素を持ちます。つまり、E と F の両方の要素は同じ親要素を持ちます。、F 要素は E 要素の後ろに隣接しているため、隣接する兄弟要素セレクターを使用して、構文 "E F" で F 要素を選択できます。

「+」CSSセレクターとは何ですか?

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

隣接する兄弟要素セレクター (E F)

隣接する兄弟要素セレクターは、ある要素の後の別の要素の直後の要素を選択できます, そしてそれらは同じ親要素を持っています。つまり、2 つの EF 要素は同じ親要素を持ち、F 要素は E 要素の後ろに隣接しているため、隣接する兄弟要素 Selector を使用して F 要素を選択できます。

ここには 2 つの重要な情報があります: (1) 別の要素の直後; (2) 両方に同じ親要素があります

例①:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        div+p{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
      <div>
          <p>第零个段落</p>
          <div>
              <p>第一个段落</p>
          </div>
      </div>
      <p>第二个段落</p>
      <p>第三个段落</p>
      <p>第四个段落</p>
    </body>
</html>

ログイン後にコピー

##div p は、すべての場所が

にあることを示します。要素の後の

要素

上記の「0 番目の段落」と「最初の段落」は、< でネストされているため選択されません。 div> タグ、タグの後の要素ではありません;
タグが
タグの後にあるため、「2 番目の段落」が選択されます最初の
要素の親は同じです要素 ;
「3 番目の段落」と「4 番目の段落」は
ではないため選択されませんタグの直後の
タグ

#「3 番目の段落」も選択したい場合は、次のように、その

タグを < div の直後> タグ内にも作成する必要があります

タグが

のすぐ隣にない場合は、次のようにします

隣接する兄弟セレクターが要素

div p{} をすぐに選択するため、「2 番目の段落」が選択されていないことがわかります。 after 要素は、
を選択した直後の
要素を表しますが、上記のコードでは、直後の div タグがタグです。
タグの直後にある
タグは
タグのすぐ隣にないため、
要素は選択できません。

#例②:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        li+li{
            background-color: aqua;
        }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <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>
    </body>
</html>

ログイン後にコピー

最初は、なぜ「リスト項目 2」なのか不思議に思いました。と "リスト項目 3" が両方とも選択されています~~~
最初にセレクタースタイル li li{} を分析します。これは、文字通り
タグ A < の後の
すべての項目を選択することを意味します。 li> 要素

(1) 最初の
タグは、前に
;
(2) がないため、明らかに選択されません。 2 番目の
タグは、最初の
タグのすぐ隣にある
タグであるため選択されます;

(3) 3 番目の
タグも選択されます。 selected: 3 番目の
タグの前のタグも
タグであり、CSS セレクター li li{}:
タグの後の最初の
の条件も満たしているため;Element

CSS セレクターのスタイルは li li{} であるため、この「式」はコード内の li タグに常に適用できます。

(学習ビデオ共有:
css ビデオチュートリアル
)