关于css选择器的分类

1. ID选择器
#elem{}
注：
    ID是唯一值，在一个页面中只有唯一一个，多个不符合规范。
    命名的规范，字母、下划线、中划线、数字（第一个不能为数字）
    驼峰写法、下划线写法、中划线写法（荐）

2. Class选择器
.elem{}
注：
    class选择器是可以复用的
    可以添加多个class样式
    多个样式时，样式的优先级根据css决定，而不是class属性中的顺序。
    标签+类的写法

3. 标签选择器（TAG选择器）
tag{}
使用场景：
1）. 去掉某些标签的默认样式
2）. 复杂的选择器中，如 层次选择器

4. 群组选择器（分组选择器）
可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到样式复用。

5. 通配选择器
*{}
注：
1）. 尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用场景：
2）. 去掉所有标签的默认样式时

6. 层次选择器
后代 M N{}
父子 M>N{}
兄弟 M~N{} 当前M下面的所有兄弟N标签(多个)
相邻 M+N{} 当前M下面相邻的N标签(一个)

7. 属性选择器
M[attr]{} ps: input[type]{}
M[attr=name]{} ps:div[class=box]{}
attr=name 完全匹配
attr*=name 部分匹配
attr^=name 开始匹配
attr$=name 结尾匹配
M[][][]{} ps:组合匹配

8. 伪选择器
M:伪类{}
:link 访问前的样式 （只能给a标签添加）
:visited 访问后的样式 （只能给a标签添加）
:hover 鼠标划过时的样式 （所有）
:active 鼠标按下时的样式（所有）
注：
    一般的网站都只设置
    (link visited active) hover
:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled、:focus 都是针对表单元素的

结构性伪类选择器
    :nth-of-type(x){} 可以实现隔行设置样式
    :nth-child(x){} 关注两者区别，此伪类选择器是以父的子元素为参考
    角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
    :first-of-type{}
    :last-of-type{}
    :only-of-type{}

css继承：
    文字相关的样式可以被继承
    布局相关的模式不能被继承（默认是不能继承的，但可以设置继承属性inherit值，如：height:inherit）

溢出隐藏：
    overflow:visible默认的、hidden、scroll、auto
    x轴、y轴可分别设置：
    overflow-x、overflow-y