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>

 

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Word中怎样删除分节符而不影响前节页面设置

    Word中怎样删除分节符而不影响前节页面设置

  • 微商分销系统哪家好,要怎么做?

    微商分销系统哪家好,要怎么做?分销模式的本质是分享经济,wemall微商分销系统将传统商品高昂的推广费用让利给消费者,并抽取一定金额作为分销商的佣金。分销模式使消费者直接与商家沟通,增加用户粘性,促成品牌的口碑转化为流量,相比与零售,分销有着无可比拟的优势,这也使越来越多的微商分销系统涌现出来。微信封杀分…

  • 性能监控平台搭建 — 集成Locust性能数据

    性能监控平台搭建 — 集成Locust性能数据无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。文章目录问题概述获取Locust性能数据接口定时采集性能数据性能数据采集一致性no-web模式下获取性能数据slave模式下不进行数据采集封装原文链接之前的几篇关于性能监控平台搭建的文章,分别介绍了性能测试中的资源数据采集…

  • Hsql 查询_sql数据查询

    Hsql 查询_sql数据查询还是班级,学省

  • 组播(Multicast)传输[通俗易懂]

    组播(Multicast)传输[通俗易懂]组播(Multicast)传输:在发送者和每一接收者之间实现点对多点网络连接。如果一台发送者同时给多个的接收者传输相同的数据,也只需复制一份的相同数据包。它提高了数据传送效率。减少了骨干网络出现拥

  • MySQL索引实现原理分析

    目前大部分数据库系统及文件系统都采用B-Tree(B树)或其变种B+Tree(B+树)作为索引结构。B+Tree是数据库系统实现索引的首选数据结构。在MySQL中,索引属于存储引擎级别的概念,不同存储引擎对索引的实现方式是不同的,本文主要讨论MyISAM和InnoDB两个存储引擎的索引实现方式。MyISAM索引实现MyISAM引擎使用B+Tree作为索引结构,叶节点的data域存放的…

发表回复

您的电子邮箱地址不会被公开。

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