有如下代码,请问 HTML 代码中“文本”最终渲染出的颜色分别是?
.red {color: red;}
.blue {color: blue;}
<div class="red blue">文本</div>
<div class="blue red">文本</div>
答案
两个都是蓝色
Why? CSS 的层叠规则里有一条叫做“后来居上原则”,即两个相同权值的样式,如存在相同的声明属性,则后者获胜。
本题的 CSS 样式里,.blue 和 .red 权值相同,且都声明了 color 属性,但 .blue 在样式表中位于 .red 后面的位置,所以当 HTML 中的同一标签同时引用这两个类名时,以 .blue 的 color 声明为准,和 HTML 中 className 的先后顺序无关。
有如下代码,请问 HTML 代码中“文本”最终渲染出的颜色分别是?
答案
两个都是蓝色Why? CSS 的层叠规则里有一条叫做“后来居上原则”,即两个相同权值的样式,如存在相同的声明属性,则后者获胜。
本题的 CSS 样式里,
.blue和.red权值相同,且都声明了 color 属性,但.blue在样式表中位于.red后面的位置,所以当 HTML 中的同一标签同时引用这两个类名时,以.blue的color声明为准,和 HTML 中className的先后顺序无关。