在一个规则中为同一属性赋值两次是否有效？

Question

考虑一下：

h1 { color: red; color: blue }

或者，更复杂的例子（取自SVG文件，笔画两次）：

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 specification中是否有关于此主题的内容？

Answer 1

有多个声明可以为属性赋值，以便分配适用于同一个元素，例如

。

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

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

在CSS规范中没有关于此的明确声明，因此仅允许它是禁止它的规则。多个声明很常见，但主要是因为它们使用不同的规则，通常甚至在不同的样式表中。但它们也可以在规则中使用。一种常见的技术是

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

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

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

Answer 2

COMPLETELY VALID，h1 { color: red; color: blue }此处color只会被下一个属性值覆盖，即blue

---

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