前端
======================================================
1. 书写样式（常用）
写一个.CSS文件
在HTML里用link标签引用CSS
link标签：
- link写在title下
- rel关系 href位置
======================================================
2. 基础选择器
2.1 类选择器
定义：.类名
调用：头标签添加属性 class="类名"
说明：选择器可以给多个标签使用
作用：实际书写中，父级选择器均使用类选择器
2.2 标签选择器
格式：标签
说明：同名标签都一个样式
作用：一般用于子选择
2.3 通配符选择器
- 格式：*
- 作用：用于初始化页面，CSS相关内容里有模板
======================================================
3. CSS复合选择器
%% 一般使用父级选择器就行很少使用其他几个 %%
3.1 父级选择器
格式：选择器1 选择器2 选择器3...
示例：
div p、.nav a作用：选择指定元素的所有后代元素
特点：空格分隔，层级关系
======================================================
4. 伪选择器
4.1 伪链接选择器
语法
- 示例：
a:hover
超链接伪类状态
:link：未被访问过的链接
:visited：已被访问过的链接
:hover：鼠标悬停的链接
:active：正在被点击的链接
超链接伪类顺序
- 顺序：
:link→:visited→:hover→:active
4.2 伪结构选择器
:first-child：选择父元素的第一个子元素
:last-child：选择父元素的最后一个子元素
:nth-child(n)：选择父元素的第n个子元素
:nth-last-child(n)：从父元素的最后一个子元素开始计数，选择第n个元素
4.3 伪元素选择器
::before：在元素内容的前面插入虚拟内容，需配合content属性使用
::after：在元素内容的后面插入虚拟内容，需配合content属性使用
::first-letter：选择文本的第一个字母
::first-line：选择文本的第一行
::selection：选择用户选中的文本
======================================================
5. 基础选择器-JavaScript
5.1 id选择器
定义：#id名
调用：头文件添加属性 id="id名"
说明：一个id选择器在一个页面只能用一次
CSS很少用，几乎不用
======================================================
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作用：选择同时满足多个条件的元素
特点：无分隔符，条件叠加
======================================================