前面回顾了 css 的相关知识点,现在我们在来回顾一下 CSS3 吧
浏览器前缀
浏览器前缀是针对老式浏览器的一种写法，在 CSS3 未标准化时，这些浏览器已经开始使用浏览器前缀。
常见浏览器前缀
| 内核 | 前缀 |
|---|---|
| Trident 内核：主要代表为 IE 浏览器 | -ms- |
| Gecko 内核：主要代表为 FireFox 浏览器 | -moz- |
| Presto 内核：主要代表为 Opera 浏览器 | -o- |
| Webkit 内核：主要代表为 Chrome 和 Safari 浏览器 | -webkit- |
在某些 CSS3 样式语法变动时，可以使用这些前缀，使浏览器在非标准前提下正常运行
CSS3 选择器
1.基本选择器
- *通配 --- 尽量不要使用,影响性能每次调用都要全局查找
- .class 建议使用，避免使用 id 选择器
2.层次选择器
- 后代选择器
- 子代选择器 E>F
- 相邻兄弟选择器 E+F
- 通用选择器 E~F --- E元素被忽略,其后所有 F 元素被安排。
3.伪类选择器
伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。
(1) 动态伪类
动态伪类并不存在于html中，只有当用户和网站交互的时候才会体现出来。动态伪类包含两种，一种是在链接中常看到的锚点伪类，一种是用户行为伪类。
| 链接伪类选择器 | 含义 |
|---|---|
| E:link | 未被访问过 |
| E:visited | 已被访问过 |
| 用户行为伪类选择器 | 含义 |
|---|---|
| E:active | 点击时 |
| E：hover | 鼠标滑过时 |
| E：focus | 元素获得焦点时 |
(2)目标伪类
目标伪类选择器是动态选择器，只有存在URL指向该匹配元素时，样式效果才会生效。
| 选择器 | 含义 |
|---|---|
| E :target | 选择匹配E的所有元素，并且匹配元素被相关URL指向。 |
a 标签只是把 hash 值弄到页面 target 根据 hash 值找 ID 来找到目标容器
(3)语言伪类
伪类允许您为不同的语言定义特殊的规则
| 选择器 | 含义 |
|---|---|
| E :lang | 为不同的元素设置不同的语言 |
- 第一种: 为整个文档设定语言
<!DOCTYPE HTML>
<html lang=“en-us”>
- 第二种方法: 为局部部分设置语言
<body lang="fr">
p:lang(fr){
quotes: '~' '~';
font-family: Arial;
background: #666;
}
(4)UI元素状态伪类
状态伪类选择器是一种针对 HTML 当前操作状态而进行选择的选择器
| 选择器 | 含义 |
|---|---|
| E :focus | 用于指定“表单元素”获得光标焦点时使用的样式 |
| E :checked | 表单元素被选中时使用的样式 |
| E :enabled | 设置“表单元素”中可用元素的样式 |
| E :disabled | 设置“表单元素”中不可用元素的样式 |
| E :read-write | 设置“表单元素”中读写元素的样式 |
| E :read-only | 设置“表单元素”中只读元素的样式 |
(5)结构伪类
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
- 选择器 *-child 方式
| 选择器 | 含义 |
|---|---|
| E :first-child | 选择父元素的第一个子元素 |
| E :last-child | 选择父元素的最后一个子元素 |
| E :nth-child(n) | 选择父元素下的第n个子元素 |
| E :only-child | 选择父元素中唯一的子元素(该父元素中只有一个子元素时才可以选择) |
- 选择器 *-of-type 方式
| 选择器 | 含义 |
|---|---|
| E :first-of-type | 选择同元素类型的第一个同级兄弟元素 |
| E :last-of-type | 选择同元素类型的最后一个同级兄弟元素 |
| E :nth-of-type(n) | 选择同元素类型的第n个同级兄弟元素 |
| E :only-of-type | 选择同元素类型中唯一的同级兄弟元素 |
1、参数 n 为具体的数值 大于 0 的正整数 例如 :nth-child(3) 将选择一个系列中的第 3 个元素
2、参数 n 为表达式 n*length 选择 n 的倍数，而 length 为大于 0 的整数。length 在实际运⽤用中常为 大于 1 的正数，表达式才具有实际意义，例如 :nth-child(2n)
3、参数 n 为表达式 n + length 选择大于或等于 length 的元素，例如 :nth-child(n + 3)
4、参数 n 为表达式 –n + length 选择小于或等于 length 的元素，例如 :nth-child(-n + 3)
5、参数 n 为表达式 n*length + b 其中 b 是要设置的偏移值，其表示隔 length 个元素选中第 n*length + b 个元素，例如 :nth-child(2n+1)
6、参数 n 为关键字 odd 选择系列中的奇数(1, 3, 5, 7) 元素，其效果等同于 :nth-child(2n - 1) 和 nth-child(2n + 1)
7、参数 n 为关键字 even 选择系列中的偶数(2, 4, 6, 8) 元素，其效果等同于 :nth-child(2n)
| 选择器 | 含义 |
|---|---|
| E :root | 选择文档的根元素，对于HTML文档，根元素永远HTML |
| E :empty | 选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点 |
| E :not(F) | (否定伪类)匹配所有除F以外的元素 |
4.伪元素
伪元素用于向某些选择器设置特殊效果。
| 选择器 | 含义 |
|---|---|
| ::first-letter | 向文本的第一个字母添加特殊样式 |
| ::first-line | 向文本的首行添加特殊样式 |
| ::before | 在元素之前添加内容 |
| ::after | 在元素之后添加内容 |
| ::selection | 匹配突出显示的文本，默认深蓝背景，白色字体 |
属性选择器
属性选择器是通过属性来选择元素的一种方式
| 选择器 | 功能描述 |
|---|---|
| E[ attr ] | 选择具有attr属性的元素 |
| E[ attr = val] | 选择具有attr属性且属性值为 val 的元素 |
| E[ attr |= val] | attr 属性值是一个具有 val 或者以 val- 开始的属性值 |
| E[ attr ~= val] | attr属性值具有多个空格分隔的值， 其中一个值等于 val |
| E[ attr *= val] | E 元素定义了属性 attr，其属性值任意位置包含了 val |
| E[ attr ^= val] | 以 val 开头的任意字符串 |
| E[ attr $= val] | 以 val 结尾的任意字符串 |
