。

CSS选择器的合理组成规则决定了优先级#xff0c;我们也常常用选择器优先级来合理控制元素…本节介绍选择器优先级优先级决定了元素最终展示的样式~

浏览器是通过判断CSS优先级来决定到底哪些属性值是与元素最为相关的从而作用到该元素上。

CSS选择器的合理组成规则决定了优先级我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态下面我们来具体了解下CSS选择器优先级及权重。

一.选择器优先级

当一个元素被定义了两种相同的属性时按照就近原则选取属性的取值~

!DOCTYPE

initial-scale1.0titleDocument/titlestylediv{color:

red;font-size:

如上述代码虽然div的color值被定义了两次但是由于orange离得div更近物理上因此字体应该为橙色~

2.继承性

如果子代选择器和它的父类选择器有相同的属性则按照子类的取值呈现~

!DOCTYPE

initial-scale1.0titleDocument/titlestylebody{color:

rgb(40,

body男儿何不带吴钩收取关山五十州div男儿何不带吴钩收取关山五十州/divp男儿何不带吴钩收取关山五十州/p

/body

p中的为20px而div中只有10div子代的优先级逐级递减而优先级也愈发增加~效果如下

3.优先级

继承选择器。

如果有多个选择器作用在同一个元素上浏览器会根据这个优先级顺序来确定应用哪个样式。

在上述优先级顺序中important是最高优先级它可以覆盖其他任何优先级的样式。

紧接着是内联选择器其次是ID选择器然后是类别选择器、属性选择器、伪类、元素选择器、通配符选择器和继承选择器。

需要注意的是如果两个选择器的优先级相同那么最后出现的样式将会被应用。

!DOCTYPE

initial-scale1.0titleDocument/titlestylediv{color:

red;font-size:

yellow;color:darkgrey}#yanse2{color:

rgba(56,

CSS权重叠加是指当多个CSS声明应用于同一元素时它们的权重值会叠加决定最终应用的样式。

权重的计算是根据选择器的类型和数量来确定的。

常见的选择器类型按照优先级从高到低为内联样式ID选择器类选择器元素选择器和通配符选择器。

在同一类型的选择器中选择器的数量越多权重值越高。

计算公式大致由下列表格决定

通配符选择器0,0,0,0标签选择器0,0,0,1类选择器链接伪类选择器0,0,1,0ID

style

第一个选择器的权值为0,0,0,1第二个选择器的权值为0,0,0,2第三个选择器的权值为0,0,1,1