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)


相关推荐

  • PHP实现大文件分割上传与分片上传

    PHP实现大文件分割上传与分片上传

  • 超分辨率的数据增强Python(超分辨率重建是什么)

    python在图像超分辨率重建中的应用洪华秀[1];【期刊名称】《计算机产品与流通》【年(卷),期】2019(000)002【摘要】图像超分辨率重建技术是低分辨率图像经过一系列算法处理后转换成高分辨率图像的过程,随着图像数据的应用领域不断延伸,这一技术也逐渐成了图像处理研究热点之一。近几年Python语言在人工智能领域逐渐占领榜首,它的优越性在于强大的第三方数据处理工具的支持。本文在图像超分辨率重…

  • 不同宿主机docker 通信_如何设置同网段IP

    不同宿主机docker 通信_如何设置同网段IP依赖包net-toolsiproute2bridge-utilsgitcurl权限需要在root下执行脚本dnet.shj脚本内容#likebr0要创建的桥接设备名BRNAME=$1#likeeth0要矫健的网络接口名IFNAME=$2#192.168.1.2/24当前主机IPLOCALIP=$3#192.168.1.1当前主机…

  • vb教程编程实例详解pdf_vb程序设计教程答案第四版实验

    vb教程编程实例详解pdf_vb程序设计教程答案第四版实验实验8-3VB程序题:设计一个如图2.8.4所示的应用程序,要求如下:(1.)单击“打开文件”按钮弹出一个通用对话框,选择文件后显示在文本框中(2).单击“保存文件”按钮后弹出通用对话框,确定文件名后保存。(3)单击“查找下一个”按钮后在文本文件中查找单词“VB”,找到后以高亮度显示。解题,画4个按钮,1个文本框控件,再加上一个通用对话框控件,代码如下:PrivateSub…

  • 外贸英文外链代发布

    外贸英文外链代发布  能进来看到这篇文章,就说明大家都是有发布英文seo外链需求的人,平时比较忙,一个人忙不过来,没有时间发外链,或者自己外链资源太少,外链质量不高,网站总是没人气,没订单怎么办,这时候我们出现了,mmoboy专业团队,提供优质的英文外链服务:  通过人工注册博客、论坛、新闻等站点回复留言,把网站推广出去,制造手工的回复式外部链接。提高你的网站客户IP流量,增加网站的反向链接和google的收录…

  • CSS动画和JS动画对比

    CSS动画和JS动画对比在工作中,经常会写点动画效果,常用的方式有CSS动画还有JS动画,根据项目的需求,采用的方案各不相同,但是两者实现的性能分析没有进行对比。总结网上相关资料,在这里简单整理下本文主要讲以下这些内容1、浏览器渲染流程2、回流和重绘3、CSS动画4、JS动画两者对比????1.浏览器的渲染流程渲染流程主要有4个步骤解析HTML生成DOM树解析CSS样式生成CSSOM树,CSSOM树与DOM树结合生成Rendertree布局RenderTree对每个节点进

发表回复

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

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