1

以这个 HTML 标记为例：

<div class="myDivider">
    <p>
        <span></span>
    </p>
    <p>
        <span id="mySpan"></span>
    </p>
</div>

我通常只使用 ID 来引用 ID，仅此而已：

#mySpan { ... }

除了使代码更容易理解之外，将 CSS 指向元素有什么好处吗？

.myDivider p #mySpan { ... }

...或者更具体的方向：

div.myDivider > p > span#mySpan { ... }
4

2 回答 2

2

快速阅读这篇文章：http ://csswizardry.com/2011/09/writing-efficient-css-selectors/

/* 忽略这个：

我最好的猜测是，发现 ID 的速度比发现类的速度稍快，与规范相同。让你的 css 清楚地看到在哪里可以让你的加载时间稍微快一点。

*/

在更彻底地阅读之后，我发现我的猜测中有一些错误。浏览器从右到左读取 css。它首先检查 html 中是否存在右手元素，然后向上移动以确保它位于正确的位置。因此，规格大多只是确保您选择正确元素的一种方式。相反，它们不会提高性能。

我建议你阅读这篇文章，它真的很有趣

于 2013-03-25T12:30:16.403 回答
1

您可以尝试优化效率，但这通常不值得。

这一切真的有必要吗？
简短的回答是；可能不是。（CSS Wizardry，关于 CSS 效率优化）

另一方面，如果您有一些实际示例，其中特定元素每页只能出现一次，但可以出现在文档中的不同位置，您可能希望对其进行不同的样式设置。您可以通过指定比 ID更具体的规则来实现这一点。

我想不出我需要这样做的“真正”原因，但这里有一个愚蠢的例子——寻找复活节彩蛋，其中一些鸡蛋图像每页出现一次，并且需要根据特定的父内容进行缩放：

header > #egg {
  width: 64px;
  height: 64px;
}

.navigation > #egg {
  width: 32px
  height: 32px;
}

footer > #egg {
  width: 16px;
  height: 16px;
}

#egg .cleverly-hidden {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

等等

然而，值得注意的是，即使 CSS 优化通常会产生不明显的结果，您仍然应该让事情尽可能简单。为了您自己的理智，以及您的网站达到一定程度的复杂性的边缘机会，其中动态文档上下文中的“无尽”选择器链确实变得引人注目。

于 2013-03-25T14:32:59.247 回答