css选择符的优先级

本文主要是介绍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,3
Div  #sjweb { font-size:12px;}--Specificity值为 0,1,0,1
html > body div [id=”totals”] ul li>p {color:red;}--Specificity值为 0,0,1,6

这篇关于css选择符的优先级的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---