1 通用选择器
* {}
效率比较低，尽量少用;
2 简单选择器
id注意事项： 一个HTML文档里面的id值是唯一的，不能重复
- id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
- 最好不要用标签名作为id值
3 属性选择器
- 拥有某一个属性 [att]
- 属性等于某个值 [att=val]
- 其他的（不用记住）
- [attr^=val]: 属性值以val开头;
- [attr*=val]: 属性值包含某一个值val;
4 后代选择器
- 后代选择器一: 所有的后代(直接/间接的后代)
选择器之间以空格分割
- 后代选择器二: 直接子代选择器(必须是直接自带)
选择器之间以 > 分割;
5 兄弟选择器
- 兄弟选择器一：相邻兄弟选择器
使用符号 + 连接
- 兄弟选择器二: 普遍兄弟选择器
使用符号 ~ 连接
无论是相邻兄弟选择器还是普遍兄弟选择器，都是往后选，选不到前面的兄弟
6 选择器组 - 交/并集选择器
交集选择器
选择器之间无任何连接符号
如： p.box1 表示标签名为p，并且 class 名为 box1 的 div#father.box1 表示标签名为 div 并且 id 值为 fahter 并且 类名为 box1 的
并集选择器
选择器间以 , 号分割
.one, .two {} 选中了俩
7 伪类
什么是伪类（Pseudo-classes）
伪类是选择器的一种，它用于选择处于特定状态的元素;
常见伪类
- 动态伪类（dynamic pseudo-classes） :link、:visited、:hover、:active、:focus
- 其它不常用伪类： developer.mozilla.org/zh-CN/docs/…
动态伪类
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接（鼠标在链接上长按住未松开）
/* a元素的链接从来没有被访问过 */ a:link { color: red;} /* a元素被访问过了颜色 */ a:visited { color: green;} /* 鼠标悬浮在元素上面 */ a:hover { color: blue;} /* 点下去了, 但是还没有松手 */ a:active { color: purple;}
使用注意：
- :hover 必须放在 :link 和 :visited 后面才能完全生效
- :active 必须放在 :hover 后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
:active 通常用在 a、button 元素上
:hover 也能用在其他很多元素上
8 伪元素选择器
- ::before 和 ::after 用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
- 常通过 content 属性来为一个元素添加修饰性的内容。
- **注意：**伪元素是行内非替换元素，要设置宽高必须用到设置 display 属性
content也可以用 url
