背景

在20年初时总感觉自己的css 不够用，想把css 相关的东西整理下，去年一整年都比较忙，忙着就到2021了，今天趁着有点时间，先从选择器开始吧。

听说图片可以提升颜值....

 选择器

CSS选择器用于选择你想要的元素的样式。简单划分为简单选择器、组合选择器、伪类选择器。

简单选择器

1. 通配符
2. 标签选择器
3. 类选择器
4. id选择器
5. 属性选择器

属性选择器还有如下语法：

组合选择器

1. 后代选择器
2. 子元素选择器
3. 兄弟选择器
4. 交集选择器
5. 并集选择器

注意点

• 子代选择器只会匹配儿子元素，不会匹配孙子元素
• 后代选择器会匹配儿子、孙子元素
• 兄弟选择器有+和~，+ 只会匹配下一个兄弟元素，~会匹配后面所有的兄弟元素

ul li + p { color: deeppink; } // 匹配li下一个兄弟元素p，且存在同一个父级元素
ul li ~ h3 { color: purple; } // 匹配li元素后面的所有的兄弟元素h3，且存在同一个父级元素
ul li.gz { font-size: 20px } // 交集
.gz,.bj { font-size: 20px } // 并集

 codepen 代码

伪类选择器

伪类是W3C制定的一套特殊的选择器，也就是你不用写类名 如 class=... 你就可以直接拿来使用；伪类选择器主要分为

1. 动态伪类选择器
2. UI元素状态伪类选择器
3. 结构伪类选择器
4. 否定伪类选择器

1 selector:pseudo-class { property: value;}

1 E:link {color: red; }   //  选择匹配E元素，且匹配元素被定义了超链接并未被访问过。常用于链接描点上
2 E:visited {color: red; } // 选择匹配E元素，且匹配元素被定义了超链接并已被访问过。常用于链接描点上
3 E:hover {color: red; } // 选择匹配E元素，且用户鼠标停留在元素E上
4 E:active {color: red; } // 选择匹配E元素，且匹配元素被激活、选中，常用于链接描点和按钮上
5 E:focus {color: red; } // 选择匹配E元素，而且匹配元素获取焦点

1 a:link {color: #FF0000}     /* 未访问的链接 */
2 a:visited {color: #00FF00}  /* 已访问的链接 */
3 a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
4 a:active {color: #0000FF}   /* 选定的链接 */

1 E:checked（选中状态伪类选择器）：匹配选中的复选按钮或者单选按钮表单元素
2 E:enabled（启用状态伪类选择器 ）：匹配所有启用的表单元素
3 E:disabled（不可用状态伪类选择器）：匹配所有禁用的表单元素