学习了css，巩固一下基础
选择器
属性选择
- [attribute]：attribute
- [attribute="xx"]：拥有attribute属性值为xx的元素
- [attribute~="xx"]：attribute属性里的值以空格隔开，其中一个值为为xx的元素
- [attribute|="x"]：匹配所有 attribute 属性具有连字符-分隔的值，其中一个值以 x 开头的元素
伪类
- :nth-of-type(n)：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素：p:nth-of-type(1) 匹配第一个p元素
伪元素
规范
- 伪元素前的空格：1、没空格，作用在这个元素的本身；2、有空格：作用在第一代子元素上
- 伪类前不能有空格
伪类
| 伪类 | 作用 |
|---|---|
| :avtive | 激活状态 |
| :hover | 鼠标悬浮 |
| :checked | radio或checkbox被选中 |
| :disabled | 不可用 |
| :empty | 没有子元素，文字都不行 |
| :enabled | |
| :first-child | 第一个元素 |
| :first-of-type | 第一个元素（标签类型） |
| :focus | 聚焦 |
| :focus-visible | |
| :invalid | 不符合校验时 |
| :last-child | |
| :last-of-type | |
| :link | 未被访问过的链接 |
| :visited | 已访问过的链接 |
| :is() | 符合括号里的 |
伪元素
| 伪元素 | 作用 |
|---|---|
| ::first-line | 元素的首行 |
| ::first-letter | 元素的首字 |
| ::selection | 备选中的文本 |
| ::before | |
| ::after | after |
子绝父相
- why? 绝对定位是相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
设置父元素相对定位，子元素绝对定位，那么子元素就是相对于这个父元素的位置来定位的。
