How to use descendant selector in css-Front-end Q&A-php.cn

How to use descendant selector in css

青灯夜游

Release： 2022-01-20 11:47:13

Original

4112 people have browsed it

In CSS, the descendant selector is used to select all specified descendant elements of a specific element or element group. You need to place the selection of the parent element in front and the selection of child elements in the back, with a space in the middle. Separate, the syntax is "parent element child element {css style}".

How to use descendant selector in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The descendant selector is also called the inclusion selector, which is used to select the descendants of a specific element or element group. The selection of the parent element is placed in front, and the selection of child elements is placed in the back, separated by a space in the middle. .

Concentrated form of descendant selector:

1, Parent * {}Find all children from Parent.

2, Parent Generation Child 1{} is to find Child 1 from Parent Generation or Parent Generation Child 2{} is to find Child 2 from Parent Generation .

3, Parent Generation Child 1 Child 2{} This is to find Child 1 from the parent generation, and then find Child 2 from Child 1.

There can be more than just two elements in the descendant selector. For multi-layer ancestor-descendant relationships, there can be multiple spaces to separate them. For example, if there are three elements with IDs a, b, and c, then the descendant selector It can be written in the form of #a #b #c{}, as long as the selection of ancestor elements is separated by spaces before and in the middle of descendant elements.

The first form: Although all are selected, * has a lower priority.

<!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>

Copy after login

Second form:

<!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>

Copy after login

The third form: it cannot select .b and .c at the same time, only .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>

Copy after login

Another thing to note is the following code: a p with a class name of c is nested within a p, and a p with a class name of c is nested within it. At this time, it will also be selected

<!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>

Copy after login

（Learning video sharing: css video tutorial）

The above is the detailed content of How to use descendant selector in css. For more information, please follow other related articles on the PHP Chinese website!