同一个标签携带了多个类名,发生冲突时

冲突:同一个标签,同一个属性写在不同的类上,和在标签中的挂类名的书序无关,只和css的顺序有关

<p class="w1 w2">你好</p> <p class="w2 w1">欢迎</p>

css样式:

.w1{ color: red; } .w2{ color:lawngreen; }

当类名冲突时,采用就近原则。

代码演示:

202101061609902801175649

当类名冲突找不到原因的时候,可以使用 !important标记来给一个属性提高权重。这个属性的权重就是无穷大。

1) !important提升的是一个属性,而不是一个选择器

<p class="music" id="music">网易云音乐</p>

css样式:

p{ font-size: 30px; /* !inportant 做网站的时候,不允许使用。因为会让css写的很乱。 */ color: red !important; font-size: 100px; } #music{ color: aqua; font-size: 20px; } .music{ color: blueviolet; font-size: 50px; }

所以,字体颜色是red(听important的);字号是20px(听id的)。

代码演示:

202101061609903589116313

2) !important无法提升继承的权重,如果没有修饰到最内层标签,那最内层标签不会继承它的权重,会执行写到最内层的属性

<div> <p>hello</p> </div>

css样式:

div{ color:red !important; } p{ color:blue; }

由于div是通过继承性来影响文字颜色的,所以!important无法提升它的权重,权重依然是0;而p标签是选中了,所以字是蓝色的(以p为准)。

代码演示:

202101061609903687850984

权重总结:

202101061609903828692715