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

CSS 子孫セレクターとは何ですか?

青灯夜游

リリース： 2023-01-07 11:42:12

オリジナル

4128 人が閲覧しました

css 子孫セレクターには次のものが含まれます。 1. 「親要素 * {}」、親要素からすべての子孫要素を検索します。 2. 「Parent Children {}」は親要素から指定された子要素を検索します。 3. 「Parent Child 1 Child 2 {}」は親から子 1 を検索し、その子から世代 1 が子孫を検索します。 2.

CSS 子孫セレクターとは何ですか?

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

子孫セレクターは、包含セレクターとも呼ばれます。

子孫セレクターは、要素の子孫である要素を選択できます。

子孫セレクターの集中形式:

1, Parent * {}親からすべての子孫を検索します。

2、親世代の子1{}は親世代から子1を見つけるか、親世代の子2{}は親世代の子孫2から見つけます。

3, 親世代子 1 子 2{} これは、親世代から子 1 を見つけ、次に子 1 から子 2 を見つけます。

最初の形式: すべてが選択されていますが、* の優先順位は低くなります。 #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                padding: 20px;
                background: rgba(255,0,0,0.2);     //这是给它一个红色，透明度为0.2
            } 
        .a *{
                border: 2px solid black;  //这里是选中类a的所有后代
            }
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

ログイン後にコピー

#2 番目の形式: #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
        .a .b{
                border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

ログイン後にコピー

3 番目の形式: .b と .c を同時に選択することはできず、.c のみを選択します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c</div>
            </div>
        </div>
    </body>
</html>

ログイン後にコピー

もう 1 つ注意すべき点は、次のコードです: a p は c というクラス名を持つ p にネストされており、その中に c というクラス名を持つ p がネストされています。このとき、それも選択されます

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            div{
                
                padding: 20px;
                background: rgba(255,0,0,0.2);
            }
            
            .a .b .c{
                border: 2px solid black;
            }
            
            
        </style>
    </head>
    <body>
        <div class="a">a
            <div class="b">b
                <div class="c">c
                <div>
                    <div class="c">span</div>
                </div>
                </div>
            </div>
        </div>
    </body>
</html>

ログイン後にコピー

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

以上がCSS 子孫セレクターとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。