CSS复合选择器

元素选择器效果

交集选择器效果

类选择器效果

并集选择器

并集选择器也叫分组选择器或群组选择器，它是由两个或两个以上的任意选择器组成的，不同选择器之间用“，”隔开，实现对多个选择器进行“集体声明”。

并集选择器的特点是所设置的样式对并集选择器中的各个选择器都有效。

并集选择器的作用是把不同选择器的相同样式抽取出来，然后放到一个地方作一次性定义，从而简化了 CSS 代码量。

语法：

选择器 1,
选择器 2,
选择器 3,
{ 
属性 1: 属性值 1；
属性 2: 属性值 2；
}

语法说明：选择器的类型任意，既可以是基本选择器，也可以是一个复合选择器。

例：

这是 DIV1

这是 DIV2

这是段落一

这是段落二

这是一个 SPAN

后代选择器

后代选择器又称包含选择器，用于选择指定元素的后代元素。使用后代选择器可以帮助我们更快更确切地找到目标元素。

语法：

选择器 1 选择器 2 选择器 3 {
属性 1: 属性值 1；
属性 2: 属性值 2；
}

例：

段落一

段落二

段落三

段落四

段落五

段落六

子元素选择器

后代选择器可以选择某个元素指定类型的所有后代元素，如果只想选择某个元素的所有子元素，则需要使用子元素选择器。

语法：

选择器 1> 选择器 2 {
属性 1: 属性值 1;
属性 2: 属性值 2;
}

语法说明：“>”称为左结合符，在其左右两边可以出现空格，“选择器 1> 选择器 2”的含意为“选择作为选择器 1 指定元素的所有选择器 2 指定的子元素”.

例：

这是非常非常 重要 且 关键 的一步。

这是真的非常 重要 且 关键 的一步。

相邻兄弟选择器

如果需要选择紧接在某个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

语法:

选择器 1+ 选择器 2 {
属性 1: 属性值 1;
属性 2: 属性值 2;
}

例:

这是一个一级标题

这是段落 1。

这是段落 2。

这是段落 3。

属性选择器

在 CSS 中，我们还可以根据元素的属性及属性值来选择元素，此时用到的选择器称为属性选择器。属性选择器的使用主要有 2 种形式，

语法:

属性选择器 1 属性选择器 2…{
属性 1: 属性值 1;
属性 2: 属性值 2;
}

元素选择器属性选择器 1 属性选择器 2… {
属性 1: 属性值 1;
属性 2: 属性值 2;
}

语法说明：属性选择器的写法是 [ 属性表达式 ]，其中属性表达式可以是一个属性名，也可以是“属性＝属性值”等这样的表达式.

属性选择器的应用:

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门即可获取

/>

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

资料获取方式：点击蓝色传送门即可获取

[外链图片转存中…(img-1R4h0L9k-1711655132828)]