Question

我一直在阅读关于特异性的内容，坦率地说，我很惊讶我之前没有正确地知道这一点，因为我已经目睹了如果CSS被宣布为错误的特殊问题方式。

所以，我一直在研究这个问题，现在我理解计算特异性的规则。然而，在我的调查结果中，我留下了三个问题，我希望你们可以帮助我。

首先，在与CSS特异性相关时，我注意到one source在计算中包含伪元素，而another则告诉您将它们排除在计算之外。这纯粹是一个可选的东西，还是应该包括它们？

其次，为什么我应该在标识符之上声明类有什么特定原因？例如，我已经对我的开发CSS文件进行了分区，在“页脚”部分中，我有#footer，#footer-container，.grid和.one-third，在此声明订购。这完全没问题，还是我应该转换它们？下面定义的规则表明两个类都不包含任何冲突的属性：

#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，margin或padding的偏好，如字母顺序（ bottom; left; right; top），或声明为速记（top; right; bottom; left）？

非常感谢！

Answer 1

首先，在与CSS特异性相关时，我注意到one source在计算中包含伪元素，而another则告诉您将它们排除在计算之外。这纯粹是一个可选的东西，还是应该包括它们？

这对我来说是新闻;在计算选择器特异性时，看起来原先应该忽略pre-CSS2.1伪元素。几十年前发布了一篇文章，这篇文章将其排除在计算之外，就在CSS二级重构的中间。以下是1998 CSS2 recommendation所说的内容（作为参考，该文章中也引用了该内容，但链接到的网址重定向到更改后的规范的最新版本）：
选择器的特异性计算如下：
- 计算选择器中的ID属性数量（= a）
- 计算选择器（= b）
- 计算选择器（= c）
- 忽略伪元素。
在CSS2.1以及最新的Selectors standard中，在计算特异性时，必须将伪元素计算为普通类型选择器。

或许更令人好奇的是，CSS1在特异性方面与当前标准具有相同的伪元素规则：

伪元素和伪类分别计为普通元素和类。

这让我相信CSS2.0中的变化最终在CSS2.1中被逆转，因此它不会破坏碰巧依赖于行为的现有（遗留）样式表，和/或因为它根本没有理解为不包含伪元素，因为你将样式应用于它们就像使用实际元素一样。
其次，是否有任何具体原因我应该在标识符之上声明类？例如，我已经对我的开发CSS文件进行了分区，在“页脚”部分中，我有#footer，#footer-container，.grid和.one-third，在此声明订购。这完全没问题，还是应该转换它们？

将您的课程放在您的ID之前应该没有区别，只要您的两个课程遵循他们所在的顺序和您的两个ID，同样如此。即使假设所有这些规则碰巧匹配相同的元素，ID也应该优先于任何需要覆盖的属性的类。
最后，只是一个关于按字母顺序列出CSS属性的快速问题。我完全理解这是可选的，但是使用我上面#footer的声明作为示例，是否有border，margin或padding的偏好，如字母顺序（ bottom; left; right; top），或声明为速记（top; right; bottom; left）？

如果您单独声明手写属性，那么完全由您决定如何订购它们。为了简单起见，我肯定会遵循短线已经规定的顺序。

仅供参考，短线中的顺序按照它的方式排列，因为如果你真的连接点，顺序实际上是顺时针从顶部开始。

Answer 2

许多人认为不会使用ID来设置样式以避免特异性问题。您可以反复使用类，也可以将它们用作ID之类的元素。我同意，当它与一个同样容易使用的课程时，这是一个不必要的问题。在你说“但有时我不能改变标记”之前。让我说一下属性选择器。这可能是一些类型，但为了避免特异性问题，我认为它值得。所以

div[id='yourID'] {

}

你不必担心以后不能覆盖它。当您在团队中工作时，这尤其有用。

CSS特异性 - 定义类和＆amp;标识

2 个答案: