css选择器优先级算法

当CSS属性的效果互相抵触时，就需要计算CSS选择器的优先级。

首先，我们给选CSS择器分类：

行内样式 <div style="xxx"></div> ==> 标记a类

ID 选择器 ==> 标记b类

类，属性选择器和伪类选择器 ==> 标记c类

标签选择器、伪元素 ==> 标记d类

**计数方法：**a/b/c/d类中，出现一类，就给a/b/c/d计一个次数。a-d从高级到低级，a类的次数高的，其样式权重高，其余bcd类无需再比较；若a类的次数相同，则比较b类，b类的次数高的，其样式高权重高，其余cd类无需再比较。以此类推到d类。（此段一共3个句号，没骗你吧）

abcd类样式的计数，举例如下:

{}为style的括号，*星号选择器表示所有标签

*{} //a=0 b=0 c=0 d=0 最弱权重

a:hover{} //a=0 b=0 c=1 d=1

ul ol{} //a=0 b=0 c=0 d= 2

ul ol+li{} //a=0 b=0 c=0 d=3

h1+input[type=hidden]{} //a=0 b=0 c=1 d=3 [type=hiden]属性选择器

ul ol li.acticce{} //a=0 b=0 c=1 d=3

#ct .box p //a=0 b=1 c=1 d=1

div#header :after{} //a=0 b=1 c=0 d=2 :after伪元素

style="" //a=1 b=0 c=0 d=0

另外：

1 还有样式覆盖。

如果上述中有权重计数相同的样式相互抵触，谁写在下面（谁最后被写下），谁管用，之前先写的样式都被覆盖不管用了。

2 上述分类是依据CSS选择器本身的优先级，大体上，从高到低如下。其中 !important 会无视一切，包括上面的计算方法。

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式 eg.{color: red !important;}

作为style属性写在元素标签上的内联样式

id选择器

类选择器=* 伪类选择器=* 属性选择器

标签选择器=*为元素选择器

通配符选择器

浏览器自定义

//直观理解这个顺序，也可以猜出来优先级了

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

0 条评论