Skip to content

第 53 期(W3C标准-CSS-语法):样式的顺序 #56

@wingmeng

Description

@wingmeng

有如下代码,请问 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 中的同一标签同时引用这两个类名时,以 .bluecolor 声明为准,和 HTML 中 className 的先后顺序无关。

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions