前端
1. 书写样式（常用）
- 写一个.CSS文件
- 在HTML里用link标签引用CSS
- link标签：
如果是原生HTML+CSS+JS，link好些 如果是vue，vue的内置style scoped好些，组件隔离
2. 基础选择器
2.1 类选择器
| 项目 | 说明 |
|---|
| 定义 | .类名 |
| 调用 | 头标签添加属性 class="类名" |
| 说明 | 选择器可以给多个标签使用 |
| 作用 | 实际书写中，父级选择器均使用类选择器 |
2.2 标签选择器
| 项目 | 说明 |
|---|
| 格式 | 标签{属性:属性值} |
| 说明 | 同名标签都一个样式 |
| 作用 | 一般用于子选择 |
2.3 通配符选择器
| 项目 | 说明 |
|---|
| 格式 | *{属性} |
| 作用 | 用于初始化页面，CSS相关内容里有模板 |
通配符选择器一般初始化时用一次，消除HTML标签的默认样式，之后基本不用 标签选择器一般是作为子选择器使用 基本都是类选择器
3. CSS复合选择器
3.1 父级选择器
| 项目 | 说明 |
|---|
| 格式 | 选择器1 选择器2 选择器3... |
| 示例 | div p、.nav a |
| 作用 | 选择指定元素的所有后代元素 |
| 特点 | 空格分隔，层级关系 |
父级用类选择器，子级不想绑定class时，基本都这样写
4. 伪选择器
4.1 伪链接选择器
语法
超链接伪类状态
| 状态 | 说明 |
|---|
| :link | 未被访问过的链接 |
| :visited | 已被访问过的链接 |
| :hover | 鼠标悬停的链接 |
| :active | 正在被点击的链接 |
一个hover就行了，人没那么勤快
超链接伪类顺序
- 顺序：
:link → :visited → :hover → :active
4.2 伪结构选择器
| 选择器 | 说明 |
|---|
| :first-child | 选择父元素的第一个子元素 |
| :last-child | 选择父元素的最后一个子元素 |
| :nth-child(n) | 选择父元素的第n个子元素 |
| :nth-last-child(n) | 从父元素的最后一个子元素开始计数，选择第n个元素 |
给表单那些HTML用的，基本没用过，感觉没什么用
4.3 伪元素选择器
| 选择器 | 说明 |
|---|
| ::before | 在元素内容的前面插入虚拟内容，需配合content属性使用 |
| ::after | 在元素内容的后面插入虚拟内容，需配合content属性使用 |
这俩会用点 | 选择器 | 说明 | | --- | --- | | ::first-letter | 选择文本的第一个字母 | | ::first-line | 选择文本的第一行 | | ::selection | 选择用户选中的文本 | 没用过
5. 基础选择器-JavaScript
5.1 id选择器
| 项目 | 说明 |
|---|
| 定义 | #id名 |
| 调用 | 头文件添加属性 id="id名" |
| 说明 | 一个id选择器在一个页面只能用一次 |
id选择器也不是JavaScript专属，忘记当时为什么这些分了，当时才开始学 以前确实经常用id和js绑定，而且id选择器不管HTML标签嵌套多深都直接匹配上，不过本人开发都用class 一般用`document.queryselector('<类选择器>')和JS绑定
6. 其他几种复合选择器
6.1 子级选择器
| 项目 | 说明 |
|---|
| 格式 | 选择器1 > 选择器2 |
| 示例 | div > p、.nav > ul |
| 作用 | 选择指定元素的直接子元素 |
| 特点 | >分隔，直接关系 |
6.2 并集选择器
| 项目 | 说明 |
|---|
| 格式 | 选择器1, 选择器2, 选择器3... |
| 示例 | h1, h2, h3、.title, .content |
| 作用 | 同时选择多个不同的元素 |
| 特点 | 逗号分隔，样式共享 |
6.3 交集选择器
| 项目 | 说明 |
|---|
| 格式 | 选择器1选择器2选择器3...（无分隔符） |
| 示例 | p.red、div.container.active |
| 作用 | 选择同时满足多个条件的元素 |
| 特点 | 无分隔符，条件叠加 |
这三个基本用不上