-1

Web 浏览器是否合并 css 规则的执行以便它们高效运行？

我知道多个css规则是级联的。

我只对级联规则的性能影响感兴趣。

例如，对于以下内容：

button,
input,
select {
  display:block;
}

select {
  margin:1rem;
}

我知道两者都display:block;将margin:1rem;应用于selects。

我只是不确定浏览器是否优化了其内部 css 选择器检查。在上面的示例中，次优浏览器可以检查：

  1. 如果按钮，或选项，或选择，然后显示：块；
  2. 如果选择，则margin:1rem；

执行这些检查的最佳方法是：

  1. 如果是按钮或选项，则显示：块；
  2. 如果选择，则显示：块；保证金：1rem；

大多数现代浏览器是否足够智能以合并选择器的两个规则的执行，select以便它们运行第二组检查（最佳检查）？

如果是这样，哪些浏览器及其版本执行 css 规则合并？

链接到有关此的文档，或浏览器功能列表站点上的信息，也将不胜感激。

我对此感兴趣，因为我想最小化我的 css（有时涉及复制选择器部分以避免重复声明），并使我的 css 更易于维护。但是，我想确保我的客户的浏览器不会浪费运行冗余 css 选择器的周期。

谢谢。

4

2 回答 2

1

是的。这就是层叠样式表或 CSS 中“层叠”的含义。

于 2013-06-14T00:14:26.810 回答
0 
select {
  display:block;
}

select {
  margin:1rem;
}

将按顺序阅读，并且由于没有覆盖，它将最终成为

select {
  display:block;
  margin:1rem;
}

在最终的表示。浏览器有它自己的默认 CSS，它会按顺序被所有 CSS 覆盖，并且在 CSS 内部，属性也会按顺序覆盖。如果没有过度使用，那么最终的 CSS 只是所有 CSS 中所有属性的整理 - 因此是级联样式表。

此外，标签在 HTML 页面中的位置会影响级联。如果是在 CSS 链接之后，它将在读取 CSS 文件后应用，反之亦然。

于 2013-06-14T00:31:33.063 回答