如果我在一个元素上有 2 个属性，将显示哪一个？答案

【问题标题】：If i have 2 attributes on an element, which one will be displayed?如果我在一个元素上有 2 个属性，将显示哪一个？
【发布时间】：2015-05-08 22:12:31
【问题描述】：

例如，如果一个元素有 2 个类，都具有颜色属性，那么将显示哪一个？

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

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

在这种情况下，文本将采用哪种颜色？这里的规则是什么？它是 css 中的类的顺序，还是 in 中的？在这种情况下，我想不出一个规则。

【问题讨论】：

标签： html css web

【解决方案1】：

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

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

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

所以 .green 将获胜，您的文本颜色将为绿色。

更新：
html元素中属性值的顺序没有影响。
而当有多个 sylings 获胜取决于CSS cascading rules。规则是 inline css 胜过其他所有，而 Head css 等等......

1.内联css
2.头部css
3.外部css
4. 默认css

【讨论】：

【解决方案2】：

在您的情况下，这取决于课程的顺序，因此将应用绿色。有关更多信息，请查看MDN Specificity

特异性是根据计数的串联计算的每个选择器类型。它是一个权重，应用于对应的匹配表达式。

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

【讨论】：

【解决方案3】：

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

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

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

内联 css > 最后一个 css 类 > 第一个 css 类。

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

【讨论】：

【解决方案4】：

是的，在这种情况下只是类中的顺序。但是您必须考虑 CSS 中的特殊性。下面的示例将获得第一个 div 黄色，即使它具有红色和绿色类。这是因为 ID 比类更具体。如果你添加例如 parent > div 也是一样的。

#special-div {
    background: yellow;
}

.red {
    background: red;
}

.green {
    background: green;
}

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

【讨论】：

【解决方案5】：

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

所以绿色将显示在您的 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 特定元素的优先级：-

【讨论】：

【解决方案6】：

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

“Specificity”定义了应用哪些样式，如果有样式冲突。

【讨论】：

【解决方案7】：

会显示绿色

  .green{color:green}

【讨论】：