哪个是基于 ID 或类的 CSS 中最强的声明 [重复]答案

【问题标题】：Which is the strongest declaration in CSS based on ID or class [duplicate]哪个是基于 ID 或类的 CSS 中最强的声明 [重复]
【发布时间】：2021-12-31 20:50:57
【问题描述】：

在这里，我使用了一个 ID(#mybox) 和 class(.box)，但两者都具有相同的声明。此外，这里仅使用 ID 处理背景颜色。除了我只知道 ID 和类之间的区别，但这里是与 ID 和类的比较。它与 ID 一起工作有什么区别。在这种情况下，两者最强。

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
    #mybox{background-color: red;} 
    .box{background-color:yellow;}
</style>
</head>
<body>
    <div id="mybox" class="box">
        boxes block
    </div>
</body>
</html>

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

这称为 CSS 特异性。

ID 比类具有无限多的特异性。

您可以在这里了解更多信息：https://web.dev/learn/css/specificity/
还有一点有趣的资源https://cssspecificity.com/

【讨论】：

【解决方案2】：

ID 获胜。只有使用 !important 声明，该类才能获得偏好。

#mybox{background-color: red;} 
.box{background-color:yellow !important;}
/* yellow */

注意： @owenizedd 正确指出 !important 应尽可能避免。

【讨论】：

重要的是一种不好的做法developer.mozilla.org/en-US/docs/Web/CSS/Specificity，你应该避免它!important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets
@owenizedd 没错。但这不是重点。这只是为了说明何时可以使用类定义而不是 id 定义。
是的，我的观点也不是为了反驳你的帖子，更多地对此给予额外说明将是一个很棒的 IMO。
@owenizedd 只是一个评论：如果你总是使用重要的，它不会破坏级联性质 xD 只是在开玩笑
@johnSmith 很高兴知道 ;-)