相同的 CSS 选择器使用了两次答案

【问题标题】：Same CSS selector used twice相同的 CSS 选择器使用了两次
【发布时间】：2023-03-21 11:17:01
【问题描述】：

在查看CSS tutorial 时，我注意到以下 CSS 重复选择器：

body {
  text-align: center;
}

body {
  background: #193549;
  color: white;
  font-family: 'helvetica neue', sans-serif;
  font-weight: 100;
  font-size: 50px;
}

将一些 CSS 属性放在单独的 CSS 选择器中是否有任何好处？作者想达到什么目的？

【问题讨论】：

如果它们在同一个文件中，不，没有区别/好处。但是，如果放在单独的文件中，它们在不同的页面中可能会产生不同的效果。
在这种情况下，它们在同一个文件中，彼此紧挨着粘贴。

标签： html css css-selectors

【解决方案1】：

除了个人喜好之外，没有任何好处。例如，将一起组合在一起的事物组合在一起，以便更容易阅读或更新/删除。您可能有默认的body 样式，然后是您添加的一些独特的body 样式以支持插件或其他东西，因此您可能有一个单独的body 条目，用于与其他样式组合的独特插件样式为插件定义，因此更容易阅读/查找与插件相关的样式。

这样编写 CSS 也是一种不好的做法。它使用额外的空间（使您的文件变大）并使清理和跟踪样式更改更加困难。

【讨论】：

【解决方案2】：

为了更好的维护和一致性，应该合并类属性。

【讨论】：

【解决方案3】：

拥有多个这样的 CSS 块没有任何好处。如果它们在不同的文件中，以后可能会导致心痛，因为列出的最后一个属性将“获胜”。

因此，如果第二个 body 也具有 text-align 属性，则第二个将“覆盖”第一个。

无论如何，如果是同一个选择器，它们应该在同一个 CSS 块中。

【讨论】：