css选择器
1、选择器类型
A、基础选择器
* 通用元素选择器，匹配页面任何元素（比较少用）
#id id选择器 ， 匹配特定id的元素（id="name"）
.class 类选择器， 匹配class包含（不是等于）特定类的元素
element 标签选择器 （如body div p h1-h6）
B、组合选择器
E,F 多元选择器。 相当于并列选择器。用 , 分隔，同时匹配元素E或者元素F
E F后代选择器。 用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归），元素F
E>F子元素选择器。 用 > 分隔，匹配E元素的所有直接子元素（再嵌套的子元素就没有用）
E+F直接相邻选择器。匹配E元素之后的相邻的同级元素F
E~F普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F （无论直接相邻与否）
.class1.class2 : （既、又）id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
element#id ：id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
C、属性选择器
D、伪类选择器
E、伪元素选择器
基础选择器
（1）* ：通用元素（全局）选择器，匹配页面任何元素（比较少用）
（2）#id：id选择器，匹配特定id的元素（id="name"）
（3）.class：类选择器，匹配class包含（不是等于）特定类的元素（class="head"）
（4）element：标签选择器（body, div, ul, li）
组合选择器
（1）E,F 多元选择器。 平级元素标签的选择
（2）E F 后代选择器。 父、子元素标签的选择（用空格分隔，匹配E元素所有的后代）（不只是子元素，子元素向下递归）
（3）E>F 子元素选择器。 父>子（第二级父元素）元素标签的选择（对再嵌套的子元素没用）
（4）E+F 直接相邻选择器。 同级元素标签的选择
（5）E~F 普通相邻选择器（弟弟选择器） 在父元素下，多个平级元素标签的选择 （无论直接相邻与否）
（6）.class1.class2 ： 既、又，直接靠在一起，同时拥有这两个类选择器特性的一个元素。id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
（7）element#id ： id和class选择器和选择器连写的时候中间没有分隔符， . 和 #本身充当分隔符的元素
4、属性选择器
（1）E[attr] ：匹配所有具有属性attr的元素，如div[id] 就能取到所有有id属性的div
（2）E[attr=value] :匹配属性attr值为value的元素，如div[id=test]，匹配id=test的div
5、伪类选择器 代表一个元素的另一种状态
几种类型：
E: first-child(1) 匹配元素E的第一个子元素
E：link 匹配所有未被点击的链接
E: visited 匹配所有已被点击的链接
E：active 匹配鼠标已经其上按下，还没被释放的E元素
E：hover 匹配鼠标悬停器上的E元素
E： focus 匹配获得当前焦点的E元素
E： lang(c) 匹配lang属性等于c的E元素
E：enabled 匹配表单中可用的元素
E：disabled 匹配表单中禁用的元素
E： checked 匹配表单中被选中的radio或checkbox元素
E： selection 匹配用户当前选中的元素
1、E：hover，鼠标悬停元素时字体颜色会变成蓝色。
选择器权重会使得E：hover大于E标签本身的权重，所以样式产生了覆盖，如图：
2、a链接上常用的css属性选择器
E：link 所有未被点击的链接
E: visited 所有已被点击的链接
E：hover 鼠标悬停器上的E元素
E：active 鼠标已经按下，未释放E元素
由于css元素按顺序填写，依次展现元素属性，这里涉及到：a这个元素下的伪类选择器权重，从而造成样式覆盖，如图演示：
3、E：enabled/disabled 表单中可用/禁用的元素
E：enabled 表单中可用的元素 E：disabled 表单中禁用的元素
如输入框被禁用，设置css里的元素属性，图：
4、E：nth-child(n) 父元素下的第n个子元素，并且第n个元素为E
5、E:nth-of-type(n) 父元素中的E类型的元素，且是第n个
如何选：首先，找父元素中子元素类型为E的，然后把它们单独拿出来进行排序，顺着数数为n的那个子元素就是我们筛选出来的
如图当n=1时，
如图当n=？（1除外的任意正整数）
四、选择器的优先级 如果多条规则作用于同一个元素上，且定义的相同属性的不同值。
1、代码
<style>
#test{color:#666;}
p {color:#333;}
</style>
<p id="text">Text</p>
2、CSS优先级
（1）从高到低分别是： A、！important 即会覆盖页面内任何位置定义的元素样式
B、作为style属性写在元素标签上的内联样式
C、id选择器
D、类选择器
E、伪类选择器
F、属性选择器
E[attr=value]，如input[type=password]
G、标签选择器
H、通配符选择器
I、 浏览器自定义
（2）复杂场景(按顺序）
a、行内样式 <div style="XXX"><div>
b、ID选择器
c、类选择器
d、属性选择器
e、伪类选择器
f、标签选择器
g、伪元素
选择器的优先级是如何计算的？
A、按顺序来计算的：假设：
a等级：行内样式<div style="XXX"><div> b等级：ID选择器 c等级：类、属性选择器、伪类选择器 d等级：标签选择器、伪元素
即a-d等级权值依次为5、4、3、2，按照a-d等级的属性顺序依次得分，若取到相应等级的权值，最高的则为最优先级别。
B、参考：当不同类别的多个选择器混合使用个怎么计算优先级？有一个简单的算法，设
a. 内联样式表的权值为1000 b. ID选择器的权值为100 c. class类选择器的权值为10 d. HTML标签选择器的权值为1
（3）样式覆盖 后面的样式会覆盖到前面的样式 （4）选择器使用经验 遵守css书写规范 使用合适的命名空间 合理地复用class
