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

相关推荐

  • css选择器的作用是什么?css的基本选择器有几种

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

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

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

    2022年 11月 13日
    00
  • css文本样式属性,css文本样式有哪些

    文本缩进 属性名:text-indent 属性名:text-indentØ 取值:• 数字+px• 数字+em(推荐:1em = 当前标签的font-size的大小)   文本水平对齐方式 属性名:text-align 注意点:• 如果需要让文本水平居中,text-align属性给文本所在标签(文本的父元素)设置   文本修饰 属性名:t…

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

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

    2022年 11月 12日
    00
  • css字体样式属性有哪些?

    字体大小 属性名:font-sizeØ 取值:数字 + pxØ 注意点:• 谷歌浏览器默认文字大小是16px• 单位需要设置,否则无效 字体粗细 属性名:font-weight 注意点:• 不是所有字体都提供了九种粗细,因此部分取值页面中无变化• 实际开发中以:正常、加粗两种取值使用最多。   字体样式(是否倾斜) 属性名:font-styleØ …

    2022年 11月 12日
    00

发表回复

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

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

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

关注微信