逗号分隔列表的特异性规则 [英] Specificity rules for comma delineated lists

问题描述

在使用级联样式表时，我观察到了以下特定顺序：

When using Cascading Style Sheets I have observed the order of specificity as follows:

第一定律：内联样式

第二定律：ID选择器的数量

第三定律：类选择器的数量

第四规律：元素选择器的数量

1st Laws: In-line Styles
2nd Laws: Number of ID Selectors
3rd Laws: Number of Class Selectors
4th Laws: Number of Element Selectors

因此，具有内联样式的项排在最前面，然后是带有一个或多个ID选择器的声明，然后是带有一个或多个类选择器，然后是带有一个或多个元素选择器的声明。用更多的ID，类和元素分别意味着更高的优先级。

So, items with in-line styles came first, followed by declarations with one or more ID selectors, followed by declarations with one or more class selectors, followed by declarations with one or more element selectors. With more IDs, classes and elements meaning more precedence, respectively.

从这个角度来看，我无法理解以逗号描述的ID，类或元素列表适合的位置。逗号分隔的列表是否有任何特殊的优先级规则？另外，在单个逗号分隔的列表中，出于计算特异性的目的，ID，类和元素是否被视为单独的项目？

From this viewpoint I was unable to comprehend where comma delineated lists of IDs, classes or elements fit. Does a comma delineated list have any special precedence rules? Also, in a single comma delineated list, are IDs, classes and elements considered separate items, for the purposes of calculating specificity?

代码示例 ：

html, body, header {
  position: absolute;
  top: 0px;
}
header {
  position: relative;
  top: 50px;
}

在上面的示例中，什么优先？逗号描述的列表是否被视为引用单个元素，在这种情况下，标头仅会在级联中排在最后就优先，还是逗号分隔的列表被视为多个元素，因此具有优先级？还是我应该首先考虑其他规则？

What takes precedence in the above example? Is the comma delineated list treated as referencing a single element, in which case the header would take precedence simply for being last in the cascade, or is the comma delineated list treated as multiple elements, and therefore takes precedence? Or are there other rules I should be considering first?

推荐答案

请记住CSS是级联的-意味着在以后引用的样式假设选择器相同，则CSS文件将具有优先权。

Remember that CSS is cascading - meaning the style that is referenced FURTHER down a CSS file will take precedence assuming the selector is the same:

header {
  background-color: red;
}
p, span, header {
  background-color: yellow;
}

<header>
  HEADER
</header>

如果我们在上述声明中切换，发生相反的情况：

If we switch around the declarations above, the opposite happens:

p, span, header {
  background-color: yellow;
}
header {
  background-color: red;
}

<header>
  HEADER
</header>

如您所见，逗号分隔的选择器/声明没有区别-它们的处理方式就像您单独处理它们一样。

As you can see, comma separated selectors / declaration make no difference - they're treated the same as if you'd done them singly.

这篇关于逗号分隔列表的特异性规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！