Home >Web Front-end >Front-end Q&A >What are the css descendant selectors?

What are the css descendant selectors?

青灯夜游Original: 2021-07-07 14:59:234241browse

css descendant selectors include: 1. "Parent element * {}", find all descendant elements from the parent element. 2. "Parent Children {}" is to find the specified child element from the parent element; 3. "Parent Child 1 Child 2 {}" is to find the child 1 from the parent, and then from the child Generation 1 finds descendant 2.

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

The descendant selector is also called the containing selector.

The descendant selector can select elements that are descendants of an element.

Descendant selector concentrated form:

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

2, parent generation child1{} is to find child1 from the parent generation or parent generation child2{} is to be found from the parent generation Offspring 2.

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

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>

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>

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>

Another thing to note is the following code: a p is nested in a p with a class name of c, and a p with a class name of c is nested in 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>

（Learning video sharing: css video tutorial）

The above is the detailed content of What are the css descendant selectors?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：what is css expressionNext article：what is css expression

See more

What are the css descendant selectors?

Related articles