Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

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

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

有如下代码,请问 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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.