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

Take this example HTML markup:

以此示例HTML标记为例:

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

I'd normally just reference the ID using just the ID and nothing more:

我通常只使用ID引用ID,仅此而已:

#mySpan { ... }

Other than making the code easier to understand, are there any benefits in directing the CSS to the element instead?

除了使代码更容易理解之外,将CSS引导到元素有什么好处吗?

.myDivider p #mySpan { ... }

...or with even more specific direction:

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

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

2 个解决方案

#1

You could try to optimize for efficiency, but it's not usually worthwhile.

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

Is all this really necessary?
The short answer is; probably not. (CSS Wizardry, regarding CSS efficiency optimization)

这一切真的有必要吗?简短的回答是;可能不会。 (CSS Wizardry,关于CSS效率优化)

On the other hand, if you have some real-world example wherein a particular element can only appear once-per page, but can appear in different locations within the document, you may wish to style it differently. You can accomplish that by specifying rules even more specific than just the ID.

另一方面,如果您有一些真实世界的示例,其中特定元素只能出现在每页一次,但可以出现在文档中的不同位置,您可能希望以不同方式设置它。您可以通过指定比ID更具体的规则来实现这一目标。

I can't think of a "real" reason I'd ever need to do this, but here's a silly example -- an easter egg hunt, wherein some egg image appears once per page and needs to scale with particular parent content:

我无法想到我需要这样做的“真实”原因,但这里有一个愚蠢的例子 - 一个复活节彩蛋,其中一些蛋图像每页出现一次,需要根据特定的父内容进行缩放:

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);
}

etc.

It's notable, however, that even though CSS optimization usually yields unnoticeable results, you should still keep things as simple as possible. For your own sanity, and for the fringe chance that your site hits a level of complexity wherein "endless" selector chains in the context of a dynamic document do become noticeable.

然而,值得注意的是,尽管CSS优化通常会产生不明显的结果,但您仍应尽可能保持简单。为了您自己的理智,以及您的网站达到复杂程度的边缘机会,其中动态文档上下文中的“无尽”选择器链确实变得明显。

#2

Quickly reading this article: http://csswizardry.com/2011/09/writing-efficient-css-selectors/

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

/* Ignore this:

/* 忽略这个:

My best guess is that the same with ID's being found slightly faster than classes it's the same with the specifications. Making it clear to your css where to look will make your loading times slightly faster.

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

After reading it more thoroughly I'm discovering some errors in my guesses. The browser reads the css from the right to the left. It first checks if the right hand element exists in the html and then works it's way up to make sure it is in the right position. So the specifications are mostly just a way to make sure you select the correct element. They do not improve performance, on the contrary.

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

I suggest you read the article, it's really interesting

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

#1