常用的CSS选择器及优先级计算

选择器就是你想去应用样式的时候去帮你选择元素。

ID选择器（#id）、

标签选择器（div,h1,p,ul）、

子选择器（ul < li）、

class选择器（.classname）、

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

属性选择器  [type="text"]

后代选择器（ul li a）、

伪元素选择器  ::first-line

组选择器、

包含选择器等

 

内联样式 > 内嵌样式 > 外部样式

内联样式：直接写在标签里，内嵌样式：<style></style>

权重计算规则：

第一等：代表内联样式，权值为1000（谁离我近，谁说了算。）

第二等：ID选择器，权值为0100

第三等：类、伪类和属性选择器，权值为0010

第四等：类型选择器和伪元素选择器　　如div p,权值为0001

通配符、子选择器、相邻选择器等。如*、》、+　　权值为0000

继承的样式没有权重

 

比较规则：

在权重相同的情况下，后面的样式会覆盖前面的样式。

！important  ( 谁有特权，谁说了算。)

作用是提高优先级，加了这句的样式优先级最高

<style>
    p{
        color:red !important;
    }
</style>
<p style="color:blue;">我显示红色</p>　　 

 

转载于:https://www.cnblogs.com/xiaoan0705/p/8487897.html