CSS - 属性缩写(简写属性)的顺序重要吗 (shorthand property)

首先这是肯定的, 比如margin之类的, 但对于background 或者 font这种呢?

 

MDN的将简写顺序的文章: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Shorthand_properties 

其中只提到大部分情况不用. 

 

这篇里提到了background中有三个例外 : https://www.webfx.com/blog/web-design/background-css-shorthand/ 

[ 在这个网页里搜 Does the order of property values matter? ] 

 

这个stackoverflow的问答里又提到了font的例外: https://stackoverflow.com/questions/12673799/css-shorthand-propertys-order

其中Jukka K. Korpela的回答很好, 更新一下其中提到的两个标准

1. css属性定义怎么看: https://www.w3.org/TR/css3-values/#component-types

2. font属性: https://www.w3.org/TR/css-fonts-3/#font-prop

 

顺带根据规则解释一下为什么stackoverflow这个文中给出的  'font:italic bold 12px/20px ' is not equal to ' font:italic 12px/20px bold;' 是不相等的, 而且是样式不完全的. 即不等于 "font-style:italic; font-weight:bold; font-size: 12px; line-height: 20px;"的

由于font 属性值 是

[ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar

根据规则得知, font-style和font-weight同属一组, 可以按任意顺序出现0/1个, 而它们一旦出现就得在其后得按顺序跟随 font-size(/line-height是可选的) 以及 font-family(font-family可替换为后面任意一个). (而且font-size和 font-family是缺一不可的). 所以属性显示有误, 出现了未定义的行为.

 

综上, 属性缩写大部分情况下不用按顺序, 部分特殊需要按照顺序 (具体请查阅MDN / 官方文档)