Question

我有一个网站：

body#contact h1 {
  color: red;
}

#contact h1 {
  color: red;
}

body.contact h1 {
  color: red;
}

.contact h1 {
  color: red;
}

<html>

<head>
  <link rel="stylesheet" type="text/css" href="overrides.css">
</head>

<body id="contact" class="contact">
  <h1>Contact us!</h1>
</body>

</html>

我应该在css文件中使用第1、2、3还是4行吗？他们都做同样的事情，但是最后一个可能会选择比我预期更多的东西。在优化速度时，一个相对于另一个有优势吗？

Answer 1

我认为我们不能说特异性提高了解析速度。 id稍微改善的是渲染速度。还有其他因素会影响您的渲染速度，例如CSS文件的大小以及必须执行许多规则一次又一次地重新定义同一类，例如

一些改善渲染效果的建议：

为您将在常规内容（段落，列表，粗体，斜体...）中使用的那些元素定义基本规则。这样，您将覆盖默认的浏览器CSS规则。
如果每个<li>都有一些特定于模块的规则，那么使用模块父类来定义它们将避免浏览器抓取整个HTML，而您不必覆盖然后，当您将相同的标签用于不同的设计作品时，该规则便会遵循。
如果子节点有多个级别，则需要对每个子节点使用类进行自定义，而不是在父类上添加更多级别的子句，否则，当您需要异常时，您将获得大量的分层类链。 / li>
尝试创建CSS模块，您可以使用定义该模块化元素的单个类在所有设计中回收这些模块。
如果可能，请避免单独使用*。如今，它已不像20年前那样成为大问题，但是越具体越好，速度越好。
不要滥用：before和：after，请负责任地使用它们。这是伪元素，可以动态修改DOM，有时某些浏览器无法正确呈现它们。
尝试将CSS速记用作一般规则。
如果使用背景图案，请平衡图像尺寸和重复频率。创建40px png或gif的图案，而不是使用4px的最小尺寸，例如因为浏览器将不得不将图像渲染少10倍，这相当于较小的额外文件大小。
使用精灵作为图标，但元素不要太大。您可以为每种颜色制作一个精灵。我还建议将其垂直放置，全部放在一栏中。这样，您可以使用background-position-y: calc(-8 * $module)之类的图标轻松找到图标。此方法将为您节省很多CSS规则来定义位置以及HTML元素，因为您不必将bg图像都沿两个轴（x，y）聚类
如果您使用标签，请始终内联添加with和height属性。如果这些图片是.jpg，请使用大约60的压缩率并另存为渐进jpg。

我认为有了这些基本规则，在大多数情况下您就不会遇到任何渲染问题。

h1 {
  margin: 16px 8px;
  font-size: 24px;
  color: #999966;
}
p {
  margin: 8px 8px 16px;
}
.thumnnail {
  float: left;
  margin: 0 8px;
}
.content, aside {
  display: table-cell;
  }
.content {
  width: 75%;
}
.content ul {
  margin: 8px;
  padding: 8px 16px ;
}
.content li {
  margin:8px 0;
}
.tabs {
  margin: 0;
  padding: 0;
  background: #ddd;
}
.tab {
  list-style: none;
  padding: 8px;
}
.tab + .tab {
  border-top: solid 2px #fff;
}

<section class="content">
  <h1>My title</h1>
  <img class="thumnnail" src="https://fakeimg.pl/250x100/" title="my image"/>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  <ul>
    <li>Excepteur sint occaecat cupidatat</li>
    <li>non proident sunt in culpa</li>
    <li>qui officia deserunt mollit anim id est laborum.</li>
  </ul>
</section>
<aside>
  <ul class="tabs">
    <li class="tab">Tab 1</li>
    <li class="tab">Tab 2</li>
    <li class="tab">Tab 3</li>
  </ul>
</aside>

Answer 2

选择器越短越好。如果可能，请确保键选择器是一个类或ID，以使其保持快速和特定的状态。

有关更多信息，请阅读以下文章。强烈推荐。

https://www.sitepoint.com/optimizing-css-id-selectors-and-other-myths/

Answer 3

在阅读我的答案之前，我想告诉您，通过CSS代码优化速度是一个很大的问题空间。您可以使用缩小器并最小化CSS的大小来优化速度。这样可以简化服务器端文件的加载并将其发送到Internet（发送给所有请求该文件的浏览器），而在浏览器端，它将通过减少必须下载的文件来提高性能。除了这方面，CSS代码性能严格来说是浏览器级别的问题，只有在观察到客户端性能问题时才应进行处理。

此外，在对CSS进行任何优化之前，请先通过删除h1的规则进行测试，看看是否会对性能有所影响。

在此答案中，我将假定您在浏览器运行CSS时遇到客户端性能问题。 id的{{1}}选择器告诉浏览器搜索给定的#，由于在有效HTML代码的情况下id是唯一的，因此大多数浏览器将停止搜索第一次出现。但是，您为id定义了id，但这并不能提高性能，因为body是根body标记的直接子代。如果您有一个部分可以找到所有html标签，那么最好给它一个h1并在选择器中使用它。 id选择器不会在第一次比赛时停止，因为class并不唯一。假设您有一个class，其中所有div标签都在其中：

h1

如果给它一个<div>  </div>：

id

并在选择器中使用它：

<div id="h1-container">
    <!-- There are some h1 tags in here -->
</div>

然后它应该很快。如果您仍然遇到性能问题，则可能需要使用可重现的示例（例如JSFiddle）为我们提供有关问题的更多信息。

更具体的选择器解析起来更快吗？

3 个答案: