CSSで子孫セレクターを使用する方法-フロントエンドQ&A-php.cn

CSSで子孫セレクターを使用する方法

青灯夜游

リリース： 2022-01-20 11:47:13

オリジナル

4095 人が閲覧しました

CSS では、子孫セレクターは、特定の要素または要素グループの指定されたすべての子孫要素を選択するために使用されます。親要素の選択を前に、子要素の選択を後ろに置く必要があります。間にスペースを入れて区切ると、「親要素子要素 {css style}」という構文になります。

CSSで子孫セレクターを使用する方法

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

子孫セレクターは包含セレクターとも呼ばれ、特定の要素または要素グループの子孫を選択するために使用されます。親要素の選択が前に配置され、子要素の選択が配置されます後ろ、真ん中にスペースで区切られています。

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

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

2, 親世代の子 1{} は、親世代または親世代から子 1 を検索します。子 2{} は、親世代から子 2 を検索します。

3, 親世代子 1 子 2{} これは、親世代から子 1 を検索し、次に子 1 から子 2 を検索します。

子孫セレクターには 2 つ以上の要素を含めることができます。多層の祖先と子孫の関係の場合、それらを区切るために複数のスペースが存在する可能性があります。たとえば、ID が a、b、c の 3 つの要素がある場合、次のようになります。子孫セレクター先祖要素の選択が子孫要素の前後でスペースで区切られている限り、#a #b #c{} の形式で記述することができます。

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

<!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 サイトの他の関連記事を参照してください。