权重问题深入

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

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

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

css样式：

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

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

代码演示：

当类名冲突找不到原因的时候，可以使用 !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的）。

代码演示：

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

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

css样式：

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

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

代码演示：

权重总结：