6

考虑一下：

h1 { color: red; color: blue }

或者，一个更复杂的例子（取自 SVG 文件，stroke 是两次）：

style="fill:none;stroke:#ffffff;stroke-width:20;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke:#555555"

答案似乎是“这是合法的，最后的分配获胜”，但我真的很想知道：CSS 规范中是否有关于这个主题的内容？

4

2 回答 2

13

拥有多个为属性分配值的声明是有效的，以便分配应用于同一元素，例如

h1 { color: red; }
h1 { color: blue }

在同一规则中组合声明不会改变这一点。

CSS 规范中没有明确说明这一点，所以它被允许只是因为没有规则禁止它。多个声明非常常见，尽管大多数情况下它们处于不同的规则中，甚至经常出现在不同的样式表中。但它们也可以在规则内使用。一种常见的技术是

 p { max-width: 25em; max-width: 60ch }

这意味着不识别该ch单元的旧浏览器将使用该设置max-width: 25em，而在较新的浏览器中，后一个声明将生效。

CSS 中的一般规则是，在所有其他条件相同的情况下，后面的声明获胜；这是级联规则的一部分。在 的情况下h1 { color: red; color: blue }，所有其他事情都是平等的。但是在 中h1 { color: red !important; color: blue }，第一个声明将获胜。

于 2013-09-06T09:30:23.447 回答
5

它是完全有效的，h1 { color: red; color: blue }这里color将简单地被下一个属性值覆盖，即blue

在此处输入图像描述

即使我在我的网站处于开发模式时使用它，我也经常使用它border: 1px solid #f00;来创建页面的蓝图。

于 2013-09-06T08:57:42.660 回答