css3的高级选择器有哪些?css进阶选择器

后代选择器:空格

作用:根据 HTML 标签的嵌套关系,选择父元素 后代中 满足条件的元素
Ø 选择器语法:选择器1 选择器2 { css }
Ø 结果:
• 在选择器1所找到标签的后代(儿子、孙子、重孙子…)中,找到满足选择器2的标签,设置样式
Ø 注意点:
1. 后代包括:儿子、孙子、重孙子……
2. 后代选择器中,选择器与选择器之前通过 空格 隔开

 

子代选择器:>

作用:根据 HTML 标签的嵌套关系,选择父元素 子代中 满足条件的元素
Ø 选择器语法:选择器1 > 选择器2 { css }
Ø 结果:
• 在选择器1所找到标签的子代(儿子)中,找到满足选择器2的标签,设置样式
Ø 注意点:
1. 子代只包括:儿子
2. 子代选择器中,选择器与选择器之前通过 > 隔开

 

 

并集选择器:,

作用:同时选择多组标签,设置相同的样式
Ø 选择器语法:选择器1 , 选择器2 { css }
Ø 结果:
• 找到 选择器1 和 选择器2 选中的标签,设置样式
Ø 注意点:
1. 并集选择器中的每组选择器之间通过 , 分隔
2. 并集选择器中的每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中的每组选择器通常一行写一个,提高代码的可读性

交集选择器:紧挨着

作用:选中页面中 同时满足 多个选择器的标签
Ø 选择器语法:选择器1选择器2 { css }
Ø 结果:
• (既又原则)找到页面中 既 能被选择器1选中,又 能被选择器2选中的标签,设置样式
Ø 注意点:
1. 交集选择器中的选择器之间是紧挨着的,没有东西分隔
2. 交集选择器中如果有标签选择器,标签选择器必须写在最前面

 

hover伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式
Ø 选择器语法:选择器:hover { css }
Ø 注意点:
1. 伪类选择器选中的元素的某种状态

css3的高级选择器有哪些?css进阶选择器

声明:该文观点仅代表作者本人,《前端技术分享网》系信息发布平台,前端技术分享网仅提供信息存储空间服务。发布者:果壳日志,转载请注明出处:https://www.xin12123.com/n/526.html

(0)
上一篇 2022年 11月 12日 下午4:57
下一篇 2022年 11月 13日 下午2:50

相关推荐

  • emmet语法,emmet基础语法速查表

    作用:通过简写语法,快速生成代码

    2022年 11月 13日
    0
  • css引入方式有几种?分别是什么?

    CSS引入方式 内嵌式:CSS 写在style标签中• 提示:style标签虽然可以写在页面任意位置,但是通常约定写在 head 标签中Ø 外联式:CSS 写在一个单独的.css文件中• 提示:需要通过link标签在网页中引入Ø 行内式:CSS 写在标签的style属性中• 提示:一般会配合js使用

    2022年 11月 12日
    0
  • font-family有哪些字体?font-family属性怎么设置

    字体系列 font-family 属性名:font-familyØ 常见取值:具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列• 具体字体:”Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……• 字体系列:sans-serif、serif、monospace等……Ø 渲染规则:1. 从左往右按照…

    2022年 11月 12日
    0
  • css选择器的作用是什么?css的基本选择器有几种

    css选择器的作用:• 选择页面中对应的标签(找她),方便后续设置样式(改她) 标签选择器 结构:标签名 { css属性名:属性值; }Ø 作用:通过标签名,找到页面中所有这类标签,设置样式Ø 注意点:1. 标签选择器选择的是一类标签,而不是单独某一个2. 标签选择器无论嵌套关系有多深,都能找到对应的标签   类选择器 结构:.类名 { css属性…

    2022年 11月 12日
    0
  • css背景相关属性有哪些,css背景相关属性连写

    背景颜色 属性名:background-color(bgc)Ø 属性值:• 颜色取值:关键字、rgb表示法、rgba表示法、十六进制……Ø 注意点:• 背景颜色默认值是透明: rgba(0,0,0,0) 、transparent • 背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色   背景图片 属性名…

    2022年 11月 13日
    0

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信