css有哪些后代选择器

本篇内容主要讲解“css有哪些后代选择器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css有哪些后代选择器”吧!

成都创新互联是一家专业提供观山湖企业网站建设,专注与成都做网站、成都网站建设、H5场景定制、小程序制作等业务。10年已为观山湖众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

css后代选择器有：1、“父代元素 * {}”，从父代元素中的找到所有子代元素。2、“父代子代{}”，是从父代元素中找到指定子代元素；3、“父代子代1 子代2{}”，从父代中找到子代1，再从子代1找到子代2。

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

后代选择器（descendant selector）又称为包含选择器。

后代选择器可以选择作为某元素后代的元素。

后代选择器集中形式：

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

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>

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>

到此，相信大家对“css有哪些后代选择器”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

本文标题：css有哪些后代选择器
分享链接：https://www.cdcxhl.com/article16/pgeddg.html

成都网站建设公司_创新互联，为您提供域名注册、微信公众号、品牌网站设计、网站导航、网页设计公司、App开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容