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{}的形式,只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

第一种形式:虽然是全部选中但是*的优先级较低。

nbsp;html>                                        div{                padding: 20px;                background: rgba(255,0,0,0.2);     //这是给它一个红色,透明度为0.2            }         .a *{                border: 2px solid black;  //这里是选中类a的所有后代            }                        
a            
b                
c
            
        
    

登录后复制

css中后代选择器怎么用

第二种形式:

nbsp;html>                                        div{                                padding: 20px;                background: rgba(255,0,0,0.2);            }                    .a .b{                border: 2px solid black; //同理这里选择 .c 也是可以的因为他们都是 .a 的后代。            }                                                
a            
b                
c
            
        
    

登录后复制

css中后代选择器怎么用

第三种形式:它并不可以同时选中 .b 和 .c,只能选中.c.

nbsp;html>                                        div{                                padding: 20px;                background: rgba(255,0,0,0.2);            }                        .a .b .c{                border: 2px solid black;            }                                                
a            
b                
c
            
        
    

登录后复制

css中后代选择器怎么用

还有一点需要注意如下代码:在类名为c的p中嵌套了一个p 中再嵌套了一个类名为c的p,这时同样会被选中

nbsp;html>                                        div{                                padding: 20px;                background: rgba(255,0,0,0.2);            }                        .a .b .c{                border: 2px solid black;            }                                                
a            
b                
c                
                    
span
                
                
            
        
    

登录后复制

(学习视频分享:css视频教程)

以上就是css中后代选择器怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2938951.html

(0)
上一篇 2025年3月11日 21:28:32
下一篇 2025年3月8日 04:51:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 将内联元素转换为块元素的css语句是什么

    将内联元素转换为块元素的css语句是“内联元素{display: block;}”。display属性用于定义建立布局时元素生成的显示框类型,当该属性的值为“block”时,指定元素就会以块级元素类型显示。 本教程操作环境:windows7…

    2025年3月11日
    200
  • css怎样改变一个图片高度和宽度

    在css中,可以使用width和height属性来改变一个图片高度和宽度,只需要给图片元素添加“width:宽度值;height:高度值;”样式即可。width属性可设置元素的宽度,height属性可设置元素的高度。 本教程操作环境:win…

    2025年3月11日
    200
  • css怎么设置按钮中的字大小

    css设置按钮中字体大小的方法:1、给按钮元素添加class属性并设置属性值;2、使用class选择器选中按钮元素,添加“font-size:数值px;”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML…

    2025年3月11日
    200
  • 一个实例用css来实现胖橘的喜乐(实例分享)

    本篇文章给大家带来了关于通过vite+scss去完成一个橘猫心情变化的创意动画的相关操作,希望对大家有帮助。 本期我们通过vite+scss去完成一个橘猫心情变化的创意动画,这里的逻辑我们将不使用任何js代码,仅依靠css来完成,所以,通过…

    2025年3月11日 编程技术
    200
  • html5和css3中怎样设置图片的翻转

    在html5和css3中,可利用transform属性设置图片翻转,该属性可对元素进行旋转、缩放等操作,当该属性与rotateX()函数配合使用时,可设置元素垂直翻转样式,语法为“元素{transform:rotateX(翻转角度);}”。…

    2025年3月11日
    200
  • css3的过渡效果名是什么

    在css3中,过渡的效果名是“transition”,该属性是一个简写属性,用于规定过渡效果css属性名称、过渡效果的时间、过渡效果的速度曲线和定义过渡效果何时开始,语法为“transition:css属性名 时间 速度曲线 过渡开始;”。…

    2025年3月11日
    200
  • css3怎样实现添加阴影

    方法:1、利用“text-shadow:水平阴影 垂直阴影 模糊距离 颜色;”语句给文本元素添加阴影;2、利用“box-shadow:水平阴影 垂直阴影 模糊距离 模糊尺寸 颜色 内部阴影;”语句向框元素添加阴影。 本教程操作环境:wind…

    2025年3月11日 编程技术
    200
  • 什么是css3和html

    css3和html是:1、css3是css即层叠样式表技术的升级版本,用于控制Web页面的外观,是专门用来控制网页显示效果的;2、html是网页语言,是用于描述网页文档的一种标记语言,可以向计算机说明网页格式、内容、显示效果等等。 本教程操…

    2025年3月11日
    200
  • css3怎样让动画不回弹

    在css3中,可以利用“animation-fill-mode”属性设置动画之后不回弹,该属性用于规定动画在播放之前或之后,是否保持动画效果,语法为“animation-fill-mode:forwards;”。 本教程操作环境:windo…

    2025年3月11日
    200
  • css3的三种使用方法是什么

    css3的三种使用方法:1、内联样式,语法为“”;2、内部样式,语法为“元素{css样式代码;}”;3、外部样式,语法为“”。 本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。 css3…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论