Question

以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 { ... }

Answer 1

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

/ * 忽略这一点：

我最好的猜测是，发现ID的速度比类的速度快一些，与规格相同。明确您的css在哪里查看将使您的加载时间稍微快一点。

* /

在仔细阅读之后，我发现了一些错误。浏览器从右到左读取css。它首先检查html中是否存在右手元素，然后再向上工作以确保它处于正确的位置。所以规格主要是确保选择正确元素的一种方法。相反，它们并没有提高性能。

我建议你阅读这篇文章，这真的很有意思

Answer 2

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

这一切真的有必要吗？
简短的回答是;可能不是。（CSS Wizardry, regarding CSS efficiency optimization）

另一方面，如果您有一些真实世界的示例，其中特定元素只能出现在每页一次，但可以出现在文档中的不同位置，您可能希望以不同方式设置它。您可以通过指定规则甚至更具体的而不仅仅是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优化通常会产生不明显的结果，但您仍应尽可能保持简单。为了您自己的理智，以及您的网站达到复杂程度的边缘机会，其中动态文档的上下文中的“无限”选择链变得明显。

将CSS引导到ID而不仅仅使用ID有什么好处？

2 个答案: