css语言中怎么使用后代选择器

2024-04-02 19:04:59 383人浏览独家记忆

摘要

本文将为大家详细介绍“CSS语言中怎么使用后代选择器”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css语言中怎么使用后代选择器”能够给你意想不到的收获，请大家跟着小编的思路

本文将为大家详细介绍“CSS语言中怎么使用后代选择器”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css语言中怎么使用后代选择器”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

在css中，后代选择器用来选择特定元素或元素组的所有指定后代元素，需要将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开，语法为“父元素子元素{css样式}”。

本教程操作环境：windows7系统、css3&&HTML5版、Dell G3电脑。

后代选择器也称包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

后代选择器集中形式：

1、父代 * {}从父代中的找到所有子代。

2、父代子代1{} 是从父代中找到子代1 或者父代子代2{} 是从父代中找到子代2 。

3、父代子代1 子代2{} 这个是从父代中找到子代1，再从子代1 找到子代2.

后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，可以有多个空格加以分开，如id为a、b、c的三个元素，则后代选择器可以写成#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>

css语言中怎么使用后代选择器

第二种形式：

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

css语言中怎么使用后代选择器

第三种形式:它并不可以同时选中 .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>

css语言中怎么使用后代选择器

还有一点需要注意如下代码：在类名为c的p中嵌套了一个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>