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