Question

例如，如果一个元素有2个类，两个都有颜色属性，哪一个会显示？

<style>
.red {color:red}
.green{color:green}
</style>

<p class = "red green"> some text </p>

在这种情况下，文本会出现DWich颜色吗？这里的规则是什么？它是css中的类的顺序，还是在？在这种情况下，我无法找出规则。

Answer 1

这取决于你如何写你的CSS。
在你的情况下你有这个：

<style>
.red {color:red}
.green{color:green}
</style>

这显然意味着.red {color:red}将首先应用，然后被.green{color:green}覆盖。

所以。green会胜出，你的文字颜色会变成绿色。

<强> 更新
html元素中属性值的顺序没有效果。
当有多个获胜的音节取决于CSS cascading rules。规则是内联css赢得所有其他，以及Head css，依此类推......

1.Inline css
2.负责人 3.外部css
4.默认css

Answer 2

在您的情况下，它取决于类的顺序，因此将应用绿色。有关详细信息，请查看MDN Specificity

特异性是根据计数的连续计算的   每个选择器类型。它是一个适用于的重量   相应的匹配表达式。

在特异性平等的情况下，发现最新的声明   CSS应用于元素。

Answer 3

将显示样式中的最后一个（相同优先级），因为它会在将其写入元素时覆盖其他内容。

绿色将显示在您的p标签

中

<p class = "red green"> some text </p>

.red {color:red}
.green{color:green}

如果更改顺序，颜色将为红色： -

 <p class = "red green"> some text </p>
    .green{color:green}
    .red {color:red}

Fiddle2 具体要素的优先顺序： -

enter image description here

Answer 4

将显示绿色

  .green{color:green}

Answer 5

<style>
.red {color:red}
.green{color:green}
</style>

<p style="color:blue" class = "red green"> some text </p>

上述代码的输出为蓝色。该样式以此优先级顺序应用。

内联css＆gt;最后一个css类＆gt;第一个css课。

如果缺少内联css，则最后一个css类属性会覆盖其前的其他css类中的属性。

Answer 6

是的，在这种情况下只是班级中的顺序。但是你必须考虑CSS中的特异性。下面的示例将获得第一个div黄色，即使它有红色和绿色类。这是因为ID比类更具体。如果您添加了例如父＆gt;则会相同格。

#special-div {
    background: yellow;
}

.red {
    background: red;
}

.green {
    background: green;
}

<div class="red green" id="special-div">Test1</div>
<div class="red">Test2</div>

Answer 7

样式表中定义的后一种样式将应用于您的元素。因此该段落将绿色。

＆＃34;特异性＆＃34;如果存在样式冲突，则定义应用哪些样式。