css后代选择器_什么是后代选择器并举例说明

css后代选择器_什么是后代选择器并举例说明后代选择器集中形式:1.父代*{}从父代中的找到所有子代。2.父代子代1{}是从父代中找到子代1或者父代子代2{}是从父代中找到子代2。3.父代子代1子代

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

后代选择器集中形式:

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的div中嵌套了一个div 中再嵌套了一个类名为c的div,这时同样会被选中

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

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/168116.html原文链接:https://javaforall.net

(0)
上一篇 2022年8月3日 下午9:46
下一篇 2022年8月3日 下午9:46


相关推荐

  • java sftp 连接超时_Java sftp

    java sftp 连接超时_Java sftpimportjava io File importjava io InputStream importjava util ArrayList importjava util List importjava util Properties importjava util Vector importorg apache log4j Logger importcom jcraft jsc

    2026年3月26日
    2
  • 安装多版本php(php5.6,php7.2)

    安装多版本php(php5.6,php7.2)安装多版本php(php5.6,php7.2)

    2022年4月24日
    49
  • mysql数据库cap理论_CAP理论总结

    mysql数据库cap理论_CAP理论总结C代表Consistency,一致性,是指所有节点在同一时刻的数据是相同的,即更新操作执行结束并响应用户完成后,所有节点存储的数据会保持相同。A代表Availability,可用性,是指系统提供的服务一直处于可用状态,对于用户的请求可即时响应。P代表PartitionTolerance,分区容错性,是指在分布式系统遇到网络分区的情况下,仍然可以响应用户的请求。网络分区是指因为网…

    2022年6月15日
    90
  • linux 双网卡 同网段_双网卡 同网段 冲突

    linux 双网卡 同网段_双网卡 同网段 冲突场景:A(192.168.10.203)X网段(192.168.10.200)B(10.179.172.100)Y网段C(10.179.172.122)A是X网段中的设备,C为Y网段中的设备,现在想设备C访问到设备A,现有一台双网卡服务器B实现方式:开启服务器B的地址伪装功能1、设置服务器B的ipB服务器网卡1设置X网段ip192.168.10.200,不设网关网卡2设置Y网段ip10.179.172.100,网关设置为10.179.172.100这样A可以ping通BC也可

    2025年8月26日
    14
  • LeetCode——Longest Substring Without Repeating Characters

    LeetCode——Longest Substring Without Repeating Characters

    2022年1月3日
    47
  • FAT文件系统详解

    FAT文件系统详解FAT 格式的文件系统 磁盘数据分为 5 部分 MBR 区 DBR 区 FAT 区 DIR 区和 DATA 区 MBR 区 MBR MainBootReco 主引导扇区 意即为主引导记录区 位于整个硬盘的 0 磁道 0 柱面 1 扇区 在总共 512 字节的主引导扇区中 MBR 占用了 446 个字节 偏移 0 偏移 1BDH 另外的 64 个字节 偏移 1BEH 偏移 1FDH 交给了 DPT DiskPartitio 硬盘分区表

    2026年3月19日
    1

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号