项目上列出的类的顺序是否会影响 CSS? [英] Does the order of classes listed on an item affect the CSS?
问题描述
我知道具有最高特异性的 CSS 选择器优先(即 .classname < #idname).
I know CSS selector with the highest specificity takes precedence (i.e. .classname < #idname).
我也知道，如果事物具有相同的特异性，那么最后调用的语句优先:
I also know that if things are the same specificity, then the last statement called takes precedence:
.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue
HTML 类在 DOM 元素上的顺序会影响语句的优先级吗?
Does the ordering of HTML classes on a DOM element affect the statement priority?
推荐答案
我不得不稍微不同意 Jon 和 Watson 的回答，因为...
I have to disagree slightly with Jon and Watson's answers, as...
你的问题是:
DOM 元素上 CSS 类的顺序是否会影响语句优先级?
Does the ordering of CSS classes on a DOM element affect the statement priority?
这取决于相关陈述.
HTML 排序通常不重要
以下等价当涉及到直接调用类(即.class1或.class2)或组合调用(即.class1.class2或.class2.class1):
The following are equivalent when it comes to a straight call to a class (i.e. .class1 or .class2) or to a combined call (i.e. .class1.class2 or .class2.class1):
<div class="class1 class2"></div>
<div class="class2 class1"></div>
上述 HTML 的语句优先级可能受 HTML 顺序影响的情况
在 HTML 中排序很重要的主要地方是在 CSS 中使用 attribute 选择器.
The main place where ordering in HTML matters is with the use of attribute selectors in your CSS.
示例 1 小提琴 使用以下代码寻求 匹配 属性值字体颜色不会有任何变化，并且每个 div 都会因为类的顺序而具有不同的属性:
Example 1 Fiddle using the following code seeking to match attribute value will NOT have any change in font color, and each div will have different properties because of the ordering of the classes:
[class="class1"] {
color: red;
}
[class="class1 class2"] {
background-color: yellow;
}
[class="class2 class1"] {
border: 1px solid blue;
}
示例 2 小提琴 使用以下代码寻求匹配开头 属性值不会对第二个 div 的字体颜色有任何改变，并且每个 div 将由于类的顺序而具有不同的属性:
Example 2 Fiddle using the following code seeking to match beginning of attribute value will NOT have any change in font color for the second div, and each div will have different properties because of the ordering of the classes:
[class^="class1"] {
color: red;
}
[class^="class1 class2"] {
background-color: yellow;
}
[class^="class2 class1"] {
border: 1px solid blue;
}
示例 3 小提琴 使用以下代码寻求 匹配结尾 属性值对于第一个 div 的字体颜色不会有任何变化，并且每个 div 将由于类的顺序而具有不同的属性:
Example 3 Fiddle using the following code seeking to match end of attribute value will NOT have any change in font color for the first div, and each div will have different properties because of the ordering of the classes:
[class$="class1"] {
color: red;
}
[class$="class1 class2"] {
background-color: yellow;
}
[class$="class2 class1"] {
border: 1px solid blue;
}
关于优先"的澄清声明
需要明确的是，在上述情况下，就语句优先级"而言，真正受到影响的是该语句是否真的适用于元素.但是由于应用与否在某种意义上是基本优先级，并且由于上述情况是这样的应用实际上是基于 HTML Dom 元素上的 类的排序(而不是存在或缺席)，我认为值得将其添加为答案.
A Clarifying Statement about "Priority"
To be clear, in the cases above, what is affected as far as "statement priority" is concerned is really a matter of whether the statement actually applies or not to the element. But since the application or not is in a sense, the basic priority, and since the above are cases where such application is actually based on the ordering of the classes on the HTML Dom element (rather than the presence or absence of the class), I thought it worth adding this as an answer.
这是我的一个想法，基于 BoltClock 的评论.考虑仅使用两个类来根据被认为对不同样式至关重要的任何因素来设置元素样式.这两个类理论上可以使用属性选择器的组合来代替 11 个不同的单独类的使用(实际上，正如稍后将指出的，只有一个类，可能性几乎是无限的，但我稍后会讨论这一点，因为这帖子是关于多个类的排序).对于这两个类，我们可以对元素进行不同的样式设置，如下所示:
This is a thought occurring to me, based on BoltClock's comment. Consider just two classes being used to style elements based on whatever factors are deemed critical to different styling. These two classes theoretically can replace the use of eleven different individual classes using the combination of attribute selectors (actually, as will be noted later, the possibilities are almost limitless with but a single class, but I'll discuss that in a moment since this post is about ordering of multiple classes). For these two classes we can style elements differently as follows:
假设这些 HTML 组合
<div class="class1">Element 1</div>
<div class="class2">Element 2</div>
<div class="class1 class2">Element 3</div>
<div class="class2 class1">Element 4</div>
CSS 可能性
/* simply has the class */
.class1 {} /* affects elements 1, 3, 4 */
.class2 {} /* affects elements 2-4 */
/* has only a single class */
[class="class1"] {} /* affects element 1 only */
[class="class2"] {} /* affects element 2 only */
/* simply has both classes */
.class1.class2 {} /* affects elements 3-4 */
/* has both classes, but in a particular order */
[class="class1 class2"] {} /* affects element 3 only */
[class="class2 class1"] {} /* affects element 4 only */
/* begins with a class */
[class^="class1"] {} /* affects elements 1 & 3 only */
[class^="class2"] {} /* affects elements 2 & 4 only */
/* ends with a class
NOTE: that with only two classes, this is the reverse of the above and is somewhat
superfluous; however, if a third class is introduced, then the beginning and ending
class combinations become more relevant.
*/
[class$="class1"] {} /* affects elements 2 & 4 only */
[class$="class2"] {} /* affects elements 1 & 3 only */
如果我计算正确，3 个类可以提供至少 40 种选择器选项的组合.
If I calculate right, 3 classes could give at least 40 combinations of selector options.
为了澄清我关于无限"可能性的注释，在正确的逻辑下，单个类可能已经嵌入了通过 [attr*=value] 语法查找的代码组合.
To clarify my note about "limitless" possibilities, given the right logic, a single class can potentially have imbedded in it code combinations that are looked for via the [attr*=value] syntax.
这一切是否太复杂而无法管理?可能.这可能取决于它是如何实现的逻辑.我想指出的一点是，如果人们想要并为此进行计划，CSS3 可以使类的排序很重要，并且利用这种能力可能不是可怕错误以这种方式的CSS.
Is all this too complex to manage? Possibly. That may depend on the logic of exactly how it is implemented. The point I am trying to bring out is that it is possible with CSS3 to have ordering of classes be significant if one desired it and planned for it, and it might not be horribly wrong to be utilizing the power of CSS in that way.
这篇关于项目上列出的类的顺序是否会影响 CSS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
