项目中列出的类的顺序会影响CSS吗?

xdnvmnnf  于 2022-12-20  发布在  其他
关注(0)|答案(5)|浏览(111)

我知 prop 有最高特异性的CSS选择器优先(即.classname#idname)。
我还知道,如果事情是同样的特异性,那么最后一个被调用的语句优先:

.classname1 { color: red; }
.classname1 { color: blue; } // classname1 color will be blue

DOM元素上HTML类的顺序会影响语句优先级吗?

vyswwuz2

vyswwuz21#

我有点不同意乔恩和沃森的回答,因为...

是的,它 * 可以 *(取决于陈述)

你的问题是:
CSS类在DOM元素上的排序会影响语句的优先级吗?
这取决于所讨论的陈述。

HTML排序通常不重要

当直接调用类(例如.class1.class2)或组合调用(例如.class1.class2.class2.class1)时,以下 * 是等效的 *:

<div class="class1 class2"></div>
<div class="class2 class1"></div>

上述HTML的语句优先级可能受HTML顺序影响的情况

HTML中排序的主要问题是在CSS中使用 attribute 选择器。
Example 1 Fiddle使用以下代码查找 match 属性值时,字体颜色不会发生任何变化,并且由于类的顺序不同,每个div将具有不同的属性:

[class="class1"] {
    color: red;
}

[class="class1 class2"] {
    background-color: yellow;
}

[class="class2 class1"] {
    border: 1px solid blue;
}

Example 2 Fiddle使用以下代码查找 match beginning of 属性值时,第二个div的字体颜色不会有任何变化,并且由于类的顺序,每个div将具有不同的属性:

[class^="class1"] {
    color: red;
}

[class^="class1 class2"] {
    background-color: yellow;
}

[class^="class2 class1"] {
    border: 1px solid blue;
}

Example 3 Fiddle使用以下代码查找 match end of 属性值时,第一个div的字体颜色不会发生任何变化,并且由于类的顺序,每个div将具有不同的属性:

[class$="class1"] {
    color: red;
}

[class$="class1 class2"] {
    background-color: yellow;
}

[class$="class2 class1"] {
    border: 1px solid blue;
}

关于“优先级”的澄清声明

要明确的是,在上述情况下,就“陈述优先权”而言,受到影响的实际上是陈述是否实际上 * 适用 * 于要素的问题,但由于适用与否在某种意义上是基本优先权,并且由于以上是这样的应用实际上基于HTMLDom元素上的类的 * 排序 * 的情况(而不是类的存在或不存在),我认为值得添加这一点作为答案。

类排序的可能有效使用?

这是我根据BoltClock的评论想到的一个想法。考虑两个类,它们被用来根据对不同样式至关重要的任何因素来设计元素的样式。这两个类理论上可以通过属性选择器的组合来代替11个不同的类(实际上,如稍后将注意到的,可能性几乎是无限的,只有一个类,但我稍后会讨论这个问题,因为这篇文章是关于多个类的排序的)。对于这两个类,我们可以按如下方式对元素进行不同的样式设置:

假设这些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种选择器选项组合。
为了澄清我关于“无限”可能性的注解,给定正确的逻辑,单个类可以潜在地在其中嵌入通过[attr*=value]语法查找的代码组合。
这一切是不是太复杂了以至于无法管理?可能吧。这可能取决于它是如何实现的。我想指出的一点是,在CSS3中,类的排序是有可能的,如果你想这样做并计划好的话,而且以这种方式利用CSS的力量可能并不是“可怕的”错误。

d6kp6zgx

d6kp6zgx2#

不,没有。W3C标准的相关部分没有提到类的出现顺序。

bttbmeg0

bttbmeg03#

不,它不是,就像你说的,如果两个规则有相同的特性,那么在你的CSS中后面的那个将被应用。

h79rfbju

h79rfbju4#

不需要。但是如果你想让你的声明块有更高的优先级(w/o许多!important让它的选择器更具体
例如,对于div

div.classname1 { color: red; } /* classname1 color will be red (for `div`s) */
.classname1 { color: blue; }
bhmjp9jg

bhmjp9jg5#

在其他答案中缺少或难以找到的是:

    • 重要的是浏览器读取/解析类名的顺序**

* last * 定义的类将获胜

.a {
  color: red;
}

.b {
  color: blue;
}
<div class="a b">This text will be blue</div>
<div class="b a">This text will ALSO be blue</div>

示例来自this source

可能受导入顺序的影响

因为如果是这样的话,你可能需要注意如何在你的文件中导入CSS。
例如,在我的JavaScript项目中,我有一个可以传递额外类的组件。为了让我自己的类覆盖组件本身类的样式,我需要 * 首先 * 导入我想要样式化的组件(它将导入自己的样式),然后 * 才 * 导入我自己的样式:

//import the component first, which will import css
import {SomeComponent} from 'some-library/SomeComponent';
//And THEN our own styles
import './styles.css';

return <SomeComponent className={myClassName} />

像这样,我的buildprocess(Webpack)将把我自己的类放在CSS包中,而不是组件包中。

相关问题