规则特异性[重复]答案

【问题标题】：Rules Specificity [duplicate]规则特异性[重复]
【发布时间】：2022-02-16 04:07:19
【问题描述】：

body {
  font-size: 12px;
}
.brown {
  color: brown;
  font-weight: 200;
}
.large {
   font-size: 28px;
}
.normal {
   font-size: 18px;
   color: blue;
   font-weight: 700;
}

<html>

<head>
  <title>CSS Specificity</title>
  <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
  <div>

    <p class='normal'>Normal and blue text!</p>
    <p class='normal large brown'>Large and brown text!</p>

  </div>
  <script src="script.js"></script>
</body>

</html>

输出应该是“普通和蓝色文本！”蓝色和“大号和棕色文本”大号enter image description herebrown 我已经尝试了很多组合，但仍然无法正确 - 请帮助并感谢。

【问题讨论】：

非常感谢这里的帮助。只是想学习如何编码并遵循一些说明。我完成了 HTM 基础知识，现在尝试完成 CCS 基础知识。后来转向JavaScript。再次感谢

标签： html css css-selectors css-specificity

【解决方案1】：

normal 的规则在 CSS 中最后，因此如果同时应用这两个类，它会覆盖 brown 中的颜色

【讨论】：