web前端开发入门课程，HTML如何添加锚点
- 交集选择器
- 并集选持器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 属性选择器
交集选择器
交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须连续写，不能有空格。
交集选择器选择的元素必须是由第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素的样式是三个选择器样式，即第一个选择器;
语法：
元素选择器 . 类选择器｜ #ID 选择器 {
属性 1: 属性值 1；
属性 2: 属性值 2；
}
语法说明：“类选择器｜ ID 选择器”表示使用类选择器，或者使用 ID 选择器。
例：
使用交集选择器设置样式
元素选择器效果
交集选择器效果
类选择器效果
并集选择器
并集选择器也叫分组选择器或群组选择器，它是由两个或两个以上的任意选择器组成的，不同选择器之间用“，”隔开，实现对多个选择器进行“集体声明”。
并集选择器的特点是所设置的样式对并集选择器中的各个选择器都有效。
并集选择器的作用是把不同选择器的相同样式抽取出来，然后放到一个地方作一次性定义，从而简化了 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;
}
语法说明：属性选择器的写法是 [ 属性表达式 ]，其中属性表达式可以是一个属性名，也可以是“属性＝属性值”等这样的表达式.
属性选择器的应用:
属性选择器的应用
[title] {/* 选择具有 title 属性的元素 */
color: #F6F;
}
a[href][title]{/* 选择同时具有 href 和 title 属性的 a 元素 */
font-size: 36px;
}
img[alt] {/* 选择具有 alt 属性的 img 元素 */
border: 3px #f00 solid;
}
p[align="center"] {/* 选择 align 属性等于 center 的 p 元素 */
color: red;
font-weight: bolder;
}
应用属性选择器样式：
Helloworld
返首页
段落一
没有应用属性选择器样式
Helloworld
返首页
段落二
最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等
详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！
前端视频资料：
html>
### 最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**
>详细大厂面试题答案、学习笔记、学习视频等资料领取，[点击资料领取直通车](https://gitee.com/vip204888/web-p7)免费领取！
[外链图片转存中...(img-TgxfhaGa-1626925686509)]
**前端视频资料：**
