权重问题深入
同一个标签携带了多个类名,发生冲突时
冲突:同一个标签,同一个属性写在不同的类上,和在标签中的挂类名的书序无关,只和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为准)。
代码演示:
权重总结:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果