CSS规范：多次指定属性

Question

免责声明：我知道这是一个坏主意，我自己也不会这样做，但我想弄清楚CSS规范的内容。

如果我有CSS喜欢：

span { color: 'red'; color: 'green'; }

哪一个获胜？第一个，最后一个，我的浏览器选择一个随机的？

相关的，如果它们是多余的但不相同，如：

span { border-top-width: 10px; border-width: 5px; }

这解析完全像我说的那样：

span { border-top-width: 10px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; }

然后适用上一条规则？或者是否存在适用于冗余但不等效的CSS属性的不同规则？

我一直在深入研究CSS规范，我似乎无法找到任何直接适用于此的内容。

谢谢！

Answer 1

它级联到最后一个有效声明。 所以 - 颜色：'绿色'会赢。

再次，级联获胜。否则，border-top-width将独立设置样式，但border-width:将赢得将5px应用于全部。

Answer 2

最后一个总是赢...

关于每个人都应该知道的优先事项，有一些规则......

这些是css遵循的优先事项：

1. css propertie标记为＆＃34;！important＆＃34; - ＆GT;永远是第一位的
2. 内联代码
3. 在页面上
4. 关于外部文件

然后在文件上声明最后一个。

最佳参考：CSS: Understanding the selector's priority / specificity

另一个好的：http://www.hongkiat.com/blog/css-priority-level/

希望它有所帮助。