CSS 复合选择器

CSS 复合选择器

交集选择器

交集选择器有两个或者多个选择器勾陈个,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,(如h3.special)
交集选择器
记忆技巧:
交集选择器是比用且的意思,即…又…意思

比如: p.one 选择的是:类名为.one的段落标签。

在这里插入图片描述

并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(class、id、标签)都可以作为并集选择器的一部分。如何某些选择器定义的样式完全相同或者部分相同就可以使用并集选择器为它们定义相同的CSS样式。
在这里插入图片描述
记忆技巧:
并集选择器是 和 的意思,就是说,只要是逗号隔开的,所有选择器都会执行后面的样式。

比如 .one, p, #test{color : redf} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
在这里插入图片描述

后代选择器

后代选择器又称为包含选择器,用来选择元素或者元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外城标签的后代。
在这里插入图片描述
在这里插入图片描述

子元素选择器

子元素选择器智能选择作为某元素子元素的元素,器械发就是把父级标签写在前面,子集标签写在后面中间跟一个>进行连接 注意:符号左右两侧各保留一个空格
在这里插入图片描述
在这里插入图片描述

属性选择器

选取标签带有某些特殊属性的选择器。

选择器含义
E[attr]勋在attr属性即可
E[attr = val]属性值完全等于val
E[attr *= val]属性值里包含val字符并且存在于任意位置
E[atr] ^= val属性值里包含val字符并且存在于开始位置
E[attr $= val]属性值里包含val字符并且存在于结束位置

在这里插入图片描述
在这里插入图片描述

伪元素选择器

  1. E::first-letter 文本的第一个单词或字
  2. E::first-line 文本的第一行
  3. E:: selection 可改变选中文本样式
  4. E::before和E::after
    在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用。
div::before{
	content: "开始";
}
div::after{
    content: "结束";
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值