# CSS 基础(一)
## 1. CSS 功能
| 序号 | 描述 |
| ---- | -------- |
| 1 | 元素样式 |
| 2 | 页面布局 |
> 以上是经典应用场景,现代 CSS 功能极其强大,如动画,变换等之前 JS 才可以做的工作
## 2. 元素样式来源与优先级
| 序号 | 来源 | 描述 |
| ---- | ---------- | ------------------------------------------------------- |
| 1 | 默认样式 | 也称"代理样式",用户代理(浏览器)为每个元素设置的默认样式 |
| 2 | 继承样式 | 通常元素前景色,字体,字号等可被继承,而盒模型属性不可以 |
| 3 | 自定义样式 | 用户根据需求,使用 CSS 规则修改默认(继承)的元素样式 |
优先级: `自定义样式 > 继承样式 > 默认样式`
1. 优先级生效前提: 当同一 CSS 规则,作用同一个元素上才有意义
2. 当优先级相同时, 元素最终样式,由 CSS 规则**书写顺序**决定,这也是`CSS层叠样表`名称来源
## 3. 自定义样式来源与优先级
自定义样式来源
| 序号 | 来源 | 描述 | | 作用域 |
| ---- | -------- | ------------------------------------------ | --------------------------- | ---------------------- |
| 1 | 行内样式 | `<div style="...">...</div>` | 以属性方式添加到特定元素上 | 当前元素 |
| 2 | 文档样式 | `<style>...</style>` | 也叫内部样式,以元素方式添加 | 当前 html 文档 |
| 3 | 外部样式 | `<link rel="stylesheet" href="style.css">` | 以`css`为扩展名为独立文件 | 引用它的所有 html 文档 |
根据作用域不同,优先级如下: `行内 > 文档 > 外部`
思考: CSS 目标是为了样式复用,即一套样式,多处有效,那么应该首选哪一种样式来源呢?
1. 无特殊要求, 尽量选择"外部样式表",实现最大范围内的样式复用,提高开发效率
2. 尽管外部样式表会发起一个 http 请求, 但是样式表会被浏览器缓存,且可以在多个 html 中使用
3. 如果想对当前页面做一些个性化定制, 应该使用"文档样式"即可
4. 如果要调试某个元素,首选"行内样式",当"行内样式"无效时,再使用"调试样式`!important`"操作
## 4. css 语法: `用于自定义样式规则`
```css
选择器 {
属性1: 值1;
属性2: 值2;
属性3: 值3;
...;
}
selector {
property1: value1;
property2: value2;
property3: value3;
...;
}
```
术语:
| 序号 | 来源 | 描述 |
| ---- | -------- | -------------------------------------------------------------------- |
| 1 | 选择器 | 用于选择页面元素的标识符,有自己的一套规范 |
| 2 | 样式规则 | 选择器 + 后面大括号内的样式声明 |
| 3 | 样式声明 | 写在`{...}`内, 由属性和值组成的,可以有一个或多个,每个声明以`;`号结尾 |
举例:
```css
.box {
color: red;
background-color: yellow;
border: 1px solid currentColor;
}
```
分析:
| 序号 | 来源 | 描述 |
| ---- | -------- | ------------------------------------------------ |
| 1 | 选择器 | `.box` |
| 2 | 样式规则 | `.box {color: red;background-color: yellow;...}` |
| 3 | 样式声明 | `{color: red;background-color: yellow;...}` |
## 5. 常用选择器
5.1 基本选择器
| 序号 | 类型 | 标记 | 描述 |
| ---- | ---- | -------------------------- | ----------------------------------- |
| 1 | 元素 | `tagName`,如`<div>,<form>` | 根据标签选择,返回同名标签的元素集合 |
| 2 | 属性 | `[属性]`,`#`id,`.`class | 返回具有该属性的元素集合 |
| 3 | 群组 | `h2,table,ul,li,...` | 返回一组逗号分隔的指定元素集合 |
| 4 | 通配 | `*`, 可匹配任意类型的元素 | 返回任何一组元素集合 |
> 基本选择器,类似编程语言中的基本数据类型,是构成其它复杂选择器的基本单位或组件
5.2 上下文选择器
| 序号 | 类型 | 标记 | 描述 |
| ---- | -------- | ------ | ---------------------------------------------------- |
| 1 | 子元素 | `>` | 必须设置父级(查询起点),否则从根元素开始递归查询 |
| 2 | 后代 | `空格` | 要求与上面一样,但是会返回所有层级,包括子级的元素集合 |
| 3 | 相邻兄弟 | `+` | 返回同级相邻的下一下兄弟元素 |
| 4 | 所有兄弟 | `~` | 返回相邻的所有同级兄弟元素集合 |
5.3 选择器权重系数
- 规则: 将任何一个"选择器"视为由:`id,class,tag`组成的 3 位整数
- 当某个位置出现相应选择器类型时,将该位置置`1`即可
- 如选择器`div.box`,id:`0`,class:`1`,tag:`1`,权重系数:`0,1,1`
下面是几个典型案例,以加深理解:
| 序号 | 选择器 | 计算过程 | 权重系数 | 比较结果 |
| ---- | --------- | -------------------------- | -------- | -------------------- |
| 1 | `h3` | `id:0`, `class:0`, `tag:1` | 0, 0, 1 | |
| 1 | `div h3` | `id:0`, `class:0`, `tag:2` | 0, 0, 2 | `div h3` > `h3` |
| 1 | `.top` | `id:0`, `class:1`, `tag:0` | 0, 1, 0 | `.top` > `div h3` |
| 1 | `.top h2` | `id:0`, `class:1`, `tag:1` | 0, 1, 1 | `.top h2` > `.top` |
| 1 | `#title` | `id:1`, `class:0`, `tag:` | 1, 0, 0 | `#title` > `.top h2` |
思考:
(1): 为什么不推荐用`id`选择器呢?
> 因为权重太高, 为了让你的代码具有弹性,尽可能用权重更低的`class`
(2): 既然推荐使用权重更低的选择器, 为什么不直接使用权重最低的`标签选择器`呢?
> 因为预定义标签数量有限,且受语义化限制, 而`class`可随意命名,使用更灵活
5.5 伪类选择器
(1): 结构伪类
> 伪类,仍是`class`级, 结构伪类用于获取一组元素,所以和上下文选择器一样,需要设置查询起点(父级),否则从根递归
| 序号 | 选择器 | 描述 | 案例 |
| ---- | --------------------- | ---------------------------- | -------------------------- |
| 1 | `:nth-of-type` | 匹配分组的任意位置的子元素 | `div :nth-of-type(n)` |
| 2 | `:first-of-type` | 匹配分组的第一个子元素 | `div :first-of-type` |
| 3 | `:last-of-type` | 匹配分组的最后一个子元素 | `div :last-of-type` |
| 4 | `:only-of-type` | 匹配分组后唯一子元素 | `div :only-of-type` |
| 5 | `:nth-last-of-type()` | 反向匹配分组任意位置的子元素 | `div :nth-last-of-type(n)` |
(2): 状态伪类:表单
| 序号 | 选择器 | 描述 | 案例 |
| ---- | ------------ | ------------------------------------- | --------------------------------- |
| 1 | `:enabled` | 匹配可用状态的可交互元素 | `<input type="text" enabled>` |
| 2 | `:disabled` | 匹配禁用用状态的可交互元素 | `<input type="text" disabled>` |
| 3 | `:checked` | 匹配被选中的 radio 或者 checkbox | `<input type="radio" checked>` |
| 4 | `required` | 匹配所有必须项控件元素 | `<input type="email" required>` |
| 5 | `:optional` | 匹配所有可选项,即`:required`取反 | `<input type="text" optional>` |
| 6 | `:read-only` | 匹配所有只读状态的元素 | `<input type="text" read-only>` |
| 7 | `:default` | 匹配控件默认项,如单选/复选框,下拉表等 | `<input type="text" value="xxx">` |
(3): 状态伪类: 行为
| 序号 | 选择器 | 描述 |
| ---- | ---------- | ----------------------------- |
| 1 | `:active` | 匹配正在被激活的元素,如被点击 |
| 2 | `:hover` | 匹配鼠标悬停或触摸的元素 |
| 3 | `:visited` | 为访问过的链接添加样式 |
| 4 | `:focus` | 匹配获取焦点的元素 |
(4): 文档伪类
| 序号 | 选择器 | 描述 |
| ---- | --------- | ------------------------------------ |
| 1 | `:root` | 匹配根元素,通常是`<html>` |
| 2 | `:target` | 匹配符合当前 url 的锚点元素 |
| 3 | `:empty` | 选择没有任何子元素的元素(含文本节点) |
| 4 | `:not()` | 匹配符合结果之外的元素(选择器) |
(5): 伪元素
| 序号 | 选择器 | 描述 |
| ---- | ----------------- | -------------------------------- |
| 1 | `::after` | 在当前元素之后添加 |
| 2 | `::before` | 在当前元素之前添加 |
| 3 | `::focus-visible` | 匹配获取焦点且能被用户看到的元素 |
5.4 伪类选择器的参数
> 公式: `:nth-of-type(an+b)`: 计算出来的索引,必须是有效的, 且从 1 开始的正整数
(1): 公式参数:
| 序号 | 选择器 | 描述 |
| ---- | ------ | ----------------------------- |
| 1 | `a` | 系数, 取值范围: [0, 1, 2,...] |
| 2 | `n` | 取值范围: [0, 1, 2,...] |
| 3 | `b` | 索引计算起始偏移量, 从 0 开始 |
(2): 匹配一个: `a = 0`
| 序号 | 参数 | 案例 |
| ---- | ------ | ---------------------------------------------------------- |
| 1 | `0n+3` | `:nth-of-type(0n + 3)`,匹配第 3 个元素 |
| 2 | `3` | 因为 0 乘任何数都 0,所以可简化,只写偏移量 `:nth-of-type(3) |
(3): 匹配一组: `a = [1, -1, 2]`, 通常与偏移量 `b` 配合, 用于获取一组相邻兄弟元素
| 序号 | a | 参数 | 案例 |
| ---- | ------ | ------ | --------------------------------------------------- |
| 1 | `a=1` | `n+3` | `:nth-of-type(n + 3)`,匹配从 3 个元素开始的所有兄弟 |
| 2 | `a=-1` | `-n+3` | `:nth-of-type(-n + 3)`, 与`n+3`类似,只是反向获取 |
| 2 | `a=2` | `2n` | `:nth-of-type(2n)`, 获取偶数索引的元素 |
| 4 | `a=2` | `2n+1` | `:nth-of-type(2n+1)`, 获取奇数索引的元素 |
> 偶数`even`,奇数`odd`,`2n+1`,其实偏移量只要不是`0`就可以
