css选择符的优先级

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

一、.CSS的选择符有哪些？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel= "external"]）

9.伪类选择器（a: hover, li:nth-child）

二、优先级

!important，使用此标记的CSS属性总是最优先的。

!important->id->class->tag

important 比 内联优先级高,但内联比 id 要高；如果两个规则的特殊性相同，那么后定义的会覆盖先定义的；

当一个样式同时既有

情况一：1.多重样式优先级

多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

注意：有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

 <style type="text/css">     /* 内部样式 */     h3{color:green;}</style>    <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/>

情况二：2.CSS样式优先级算法如何计算？

1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

1.css优先级

是由四个级别和各个级别出现的次数决定的，值从左到右，左面的最大，一级大于一级

2.优先级算法

每个规则对应一个初始四位数：0,0,0,0

若是行内样式优先级，则是1,0,0,0，高于外部定义

<div style=”color: red”>sjweb</div>

若是ID选择符，则分别加0,1,0,0

若是类选择符，伪类选择符，属性选择符，则分别加0,0,1,0

若是元素选择器，伪元素选择器，则分别加0,0,0,1

3.需要注意

!important的优先级是最高的，但出现冲突时则需比较”四位数“

优先级相同时，则采用就近原则

继承得来的属性，其优先级最低

4.实例

body div p{color: green;}--Specificity值为0,0,0,3Div  #sjweb { font-size:12px;}--Specificity值为 0,1,0,1html > body div [id=”totals”] ul li>p {color:red;}--Specificity值为 0,0,1,6