1

我正在开发一个 CSS 预处理器，这意味着我拥有决定输出 HTML的神力。我无法找到有关浏览器如何将样式应用于较低级别元素的信息。哪一个更好？

假设我有width: 100%并且我必须将其应用于多个元素。

body { width: 100%; }
header { width: 100%; }
footer { width: 100%; }

也可以这样写：

body, header, footer { width: 100%; }

这使得 CSS 的大小变小了。但是，这也意味着如果我想对页脚应用另一种样式，例如，我最终会得到这样的结果：

body, header, footer { width: 100%; }
footer { font-size: 23px; }

这是一个问题 - 页脚元素在 CSS 中写了两次，这是否意味着浏览器会更慢地解析它：

body, header { width: 100%; }
footer { width: 100%; font-size: 23px; }

我相信选择器的组合是一件好事。但是，当预处理器开始实现它时，它将输出如下样式：

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

那是因为它认为会有另一个元素匹配margin-top：例如10px 。那么，这是不是一个问题。我的意思是如果我有很多

.login-box { margin-top: 10px; }
.login-box { font-weight: bold; }

并不是所有东西都集中在一个地方：

.login-box { margin-top: 10px; font-weight: bold; }

PS问题不是关于特异性

==================== 编辑01 ====================

这是一些SASS代码：

%full-width {
   width: 100%;
}
%margin-reset {
   margin: 0;
}

body {
   @extend %full-width;
   @extend %margin-reset;
}

输出是

body {
  width: 100%; 
}
body {
  margin: 0; 
}

所以，问题是：这实际上是否正确。如果预处理器输出不是更好：

body { 
   width: 100%; 
   margin: 0; 
}
4

2 回答 2

1

这听起来像是您的预处理器中的错误。您不需要具有相同选择器的多个 CSS 规则，只需将它们组合到您的代码中即可。

关于大小，计算哪个版本更小：有或没有组合选择器？这取决于具体情况。

于 2013-08-21T15:02:49.147 回答
0

你问的更多的是关于 CSS 的特殊性。此工具可能会回答您的问题，请查看CSS 特异性计算器

于 2013-08-21T07:27:17.397 回答