CSS级联的意义是否基于向HTML元素添加类的顺序?

时间:2022-11-12 12:05:41

Quite confused here.

很困惑。

<html>
<head>
<style>
.one
{
    font-weight: normal;
}

.two
{
    font-weight: bold;
}
</style>

<body>
<p class="two one"> Test!!!!!</p>
</body>

</html>

Why is Test bold? I'm clearly defining "normal" for the font weight "after" the bolded one?

为什么测试大胆?我清楚地定义了“正常”的字体重量“之后”粗体的一个?

I thought CSS did the cascading based on what order the classes were added right? Not the location in the file?

我认为CSS是基于添加类的顺序进行级联的,对吧?不是文件中的位置?

2 个解决方案

#1


6  

CSS doesn't care what order you specify the classes inside your class attribute.

CSS并不关心在类属性中指定类的顺序。

Here, both classes have equal specificity, so the class lower down in your CSS "wins".

在这里,这两个类都具有相同的特异性,因此在CSS中较低的类“wins”。

Specifics on CSS Specificity - a well written article explaining specificity.

CSS特异性的细节——一篇解释特异性的好文章。

Pointless demo of your code: http://jsfiddle.net/JwhmE/

毫无意义的代码演示:http://jsfiddle.net/JwhmE/

#2


1  

It doesn't go off the order of the classes on the div but the order they are defined in the style rule.

它不会偏离div类的顺序,而是按照样式规则定义的顺序。

#1


6  

CSS doesn't care what order you specify the classes inside your class attribute.

CSS并不关心在类属性中指定类的顺序。

Here, both classes have equal specificity, so the class lower down in your CSS "wins".

在这里,这两个类都具有相同的特异性,因此在CSS中较低的类“wins”。

Specifics on CSS Specificity - a well written article explaining specificity.

CSS特异性的细节——一篇解释特异性的好文章。

Pointless demo of your code: http://jsfiddle.net/JwhmE/

毫无意义的代码演示:http://jsfiddle.net/JwhmE/

#2


1  

It doesn't go off the order of the classes on the div but the order they are defined in the style rule.

它不会偏离div类的顺序,而是按照样式规则定义的顺序。