html - 元素 CSS 中的重复规则

Question

我有一个客户通过 Squarespace 拥有一个现有的博客。我接管了该网站，并且遇到了一些我以前从未见过的代码。我们遇到了在所有浏览器中正确呈现字体的问题。当我检查有问题的元素时，我发现了一些非常奇怪的 CSS 代码。我注意到很多元素，比如 h1，在 CSS 中有重复的规则。参见下面的示例:

#topNav nav, #topNav ul, #topNav li, #topNav a 
{
   font-family: Georgia,serif;
   font-weight: normal;
   font-style: italic;
   line-height: 1.6em;
   font-size: 13px;
   text-transform: normal;
   letter-spacing: 0px;
   font-family: "Helvetica Neue","Arial","sans-serif";
   font-size: 30px;
   line-height: 4em;
   text-transform: capitalize;
   text-decoration: none;
   letter-spacing: -1px;
   font-weight: bold;
   font-style: normal;
}

如您所见，有几个重复的规则。这段 CSS 代码的后果是什么？这会导致代码在不同浏览器上的样式不同吗？

这是一个非常大的网站，所以我希望这不是上一个开发人员这样编写代码的习惯。清理样式应该是我的首要任务吗？任何意见都会很棒!

谢谢!

Answer 1

我不得不说这只是糟糕的编码。至于对渲染的影响，我认为样式的最后一个实例会优先，因为 CSS 的整个本质是“级联”继承。

一两个简单的实验应该可以得出您问题的答案。