CSS特性 - 定义类和& ID [英] CSS Specificity - Defining Classes & IDs

问题描述

我一直在阅读特定性，坦率地说，我很惊讶，我不知道这个正确之前，因为我目睹了特殊性可以给出的问题，如果CSS被宣布在错误方式。

I've been reading up on specificity and, quite frankly, I'm surprised that I didn't know about this properly before, since I've witnessed the very issues that specificity can give if CSS is declared in the wrong manner.

所以，我一直在做一些研究的主题，我现在理解计算特异性的规则。但是，在我的调查结果，我有三个问题，我希望你们可以帮助我。

So, I've been doing a little research on the subject, and I now understand the rule for calculating specificity. However, during my findings, I've been left with three questions which I was hoping you guys could help me out with.

1. 首先，当涉及CSS特性时，我注意到一个源< a>在计算中包含伪元素，而另一个会告诉您将其放弃的计算。

1. Firstly, when relating to CSS specificity, I've noticed that one source includes pseudo elements in the calculation, while another tells you to leave them out of the calculation. Is this purely an optional thing, or should I include them?

其次，有什么具体原因，我应该在标识符之上声明类吗？例如，我已经划分了我的开发CSS文件，在页脚部分，我有 #footer ，＃footer-container ， .grid 和 .one-third 这是完美的，还是我应该切换他们？定义的规则如下，以显示这两个类不包含任何冲突的属性：

Secondly, is there any specific reason why I should declare classes above identifiers? For instance, I've already sectioned my development CSS file, and in the 'footer' section, I have #footer, #footer-container, .grid and .one-third, declared in this order. Is this perfectly fine, or should I switch them around? The defined rules are below, to show that both classes don't contain any conflicting properties:

#footer {
   background: #e4e4e4;
   border-top: 1px solid #eeeeee;
   border-bottom: 1px solid #666666;
   overflow: hidden;
   padding-bottom: 1em;
   width: 100%;
}
#footer-container {
   margin: 0 auto;
   width: 100%;
   min-width: 1000px;
}
.grid {
   margin-right: 2.1%;
   float: left;
   display: inline;
   position: relative;
}
.one-third {
   width: 31.9%;
}

最后，只是一个关于按字母顺序列出CSS属性。我完全理解这是可选的，但使用我的声明为 #footer 作为例子，有任何偏好 border bottom; left; right; top）中的， margin 或 padding ）或声明为以书面形式表示（ top; right; bottom; left ）？

Lastly, just a quick question about listing CSS properties in alphabetical order. I fully understand that this is optional, but using my declaration for #footer above as an example, is there any preference for border, margin or padding, as in alphabetical (bottom; left; right; top), or declared as written in shorthand (top; right; bottom; left)?

非常感谢！

推荐答案

首先，当涉及CSS特性时，我注意到一个来源在计算中包含伪元素，而另一个告诉你，让他们离开计算。这是纯粹是可选的，还是应该包括它们？

Firstly, when relating to CSS specificity, I've noticed that one source includes pseudo elements in the calculation, while another tells you to leave them out of the calculation. Is this purely an optional thing, or should I include them?

这是新闻给我;它看起来像前CSS2.1伪元素最初应该在计算选择器特性时被忽略。这篇文章说，让他们离开计算是在大约十年前发布的，就在CSS 2级的重构中间。以下是 1998 CSS2推荐说明（ ，供参考，也在该文章中引用，但链接的URL重定向到更改的规范的最新版本）：

This is news to me; it looks like pre-CSS2.1 pseudo-elements were originally supposed to be ignored when calculating selector specificity. The article that says to leave them out of the calculation was published almost a decade ago, right in the middle of CSS level 2's refactoring. Here's what the 1998 CSS2 recommendation says (which, for reference, is also quoted in that article, but the URL that it links to redirects to the latest revision of the spec where it's changed):

选择器的特异性计算如下：

A selector's specificity is calculated as follows:

• 计算选择器中ID属性的数量（= a）


• 计算选择器中其他属性和伪类的数量（= b）


• 计算选择器中元素名称的数量（= c）


• 忽略伪元素。

• count the number of ID attributes in the selector (= a)
• count the number of other attributes and pseudo-classes in the selector (= b)
• count the number of element names in the selector (= c)
• ignore pseudo-elements.

http://www.w3.org/TR/CSS21/cascade.html#specificity =nofollow> CSS2.1 ，以及最新的选择器标准，计算特异性时，伪元素必须像正常类型选择器一样计数。

In CSS2.1, as well as the latest Selectors standard, pseudo-elements must be counted like normal type selectors when calculating specificity.

也许更令人好奇的是， CSS1 有相同的规则对于伪元素，作为当前标准的特异性：

Perhaps what's even more curious is that CSS1 had the same rule for pseudo-elements in terms of specificity as the current standard:

伪元素和伪类被视为普通元素和类，

Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

这让我相信CSS2.0的改变最终在CSS2.1中被颠倒了，所以它不会打破现有的（遗留的）样式表发生的依赖于行为，和/或因为它包含伪元素没有意义，因为你像对待实际的元素一样应用样式。

This leads me to believe that the change in CSS2.0 was ultimately reversed in CSS2.1 so it wouldn't break existing (legacy) stylesheets that happened to rely on the behavior, and/or because it simply didn't make sense not to include pseudo-elements since you apply styles to them like you do with actual elements.

其次，有什么具体原因我要在标识符之上声明类吗？例如，我已经划分了我的开发CSS文件，在页脚部分，我有 #footer ，＃footer-container ， .grid 和 .one-third 这是完全正确的，还是我应该切换他们？

Secondly, is there any specific reason why I should declare classes above identifiers? For instance, I've already sectioned my development CSS file, and in the 'footer' section, I have #footer, #footer-container, .grid and .one-third, declared in this order. Is this perfectly fine, or should I switch them around?

不应该将你的类放在你的ID之间，只要你的两个类遵循他们的顺序和你的两个ID，同样。即使假设所有这些规则恰好匹配同一个元素，ID应优先于任何需要重写的属性的类。

There should be no difference whether you place your classes before your IDs, as long as your two classes follow the order they are in and your two IDs, likewise. Even assuming that all of these rules happen to match the same element, the IDs should take precedence over the classes for any properties that need to be overridden.

最后，只是一个关于按字母顺序列出CSS属性的快速问题。我完全理解这是可选的，但使用我的声明为 #footer 作为例子，有任何偏好 border bottom; left; right; top）中的， margin 或 padding ）

Lastly, just a quick question about listing CSS properties in alphabetical order. I fully understand that this is optional, but using my declaration for #footer above as an example, is there any preference for border, margin or padding, as in alphabetical (bottom; left; right; top), or declared as written in shorthand (top; right; bottom; left)?

如果你单独声明longhand属性，那么它完全取决于你如何订购它们。为了简单起见，我一定会遵循这些短手的顺序。

If you are declaring the longhand properties separately, then it's entirely up to you how you want to order them. I would certainly follow the order already laid out by the shorthands for the sake of simplicity.

FYI，短手中的顺序是这样排列的，因为如果你

FYI, the order in the shorthands is laid out the way it is because if you literally connect the dots, the order is actually clockwise starting from the top.

这篇关于CSS特性 - 定义类和& ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！