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

Question

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

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

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

D这种情况下的文字是什么颜色？这里的规则是什么？是css中类的顺序还是？在这种情况下我想不出规则。

Answer 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.Inline css
2.头css
3.外部css
4. 默认 css

Answer 2

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

The specificity is calculated on the concatenation of the count of each selectors type. It is a weight that is applied to the corresponding matching expression.

In case of specificity equality, the latest declaration found in the CSS is applied to the element.

Answer 3

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

所以绿色将显示在您的 p 标签中

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

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

Fiddle

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

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

Fiddle2 特定元素的优先级：-

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 > 最后一个 css class > 第一个 css class.

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

Answer 6

是的，在本例中只是 class 中的顺序。但是你必须考虑 CSS 中的特异性。下面的示例将获得第一个 div 黄色，即使它有 class 红色和绿色。这是因为 ID 比 class 更具体。如果您添加例如 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>

Answer 7

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

"Specificity" 定义应用哪些样式，如果存在样式冲突。

在此处详细了解 CSS 特异性：https://css-tricks.com/specifics-on-css-specificity/ or here http://www.sitepoint.com/web-foundations/specificity/ or even calculate specificity here http://specificity.keegan.st/。

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

If i have 2 attributes on an element, which one will be displayed?

html

css

web