速记CSS与速记不同

时间:2017-09-27 20:44:09

标签: css shorthand

正如我在标题中所说,这个简写:

.settingsSelect {
    background: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png') no-repeat, repeat 97%, 0;
    background-size: 12px, contain;
}

显示为

bad shorthand

并以正确的手写:

.settingsSelect {
    background-image: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png');
    background-position: 97%, 0;
    background-repeat: no-repeat, repeat;
    background-size: 12px, contain;
}

一切都按预期工作。

longhand

问题出在哪里?感谢。

1 个答案:

答案 0 :(得分:2)

速记版本中的语法不正确。它应该是:

.settingsSelect {
  background: url('../images/Custom.Select.Background.png') no-repeat 97%, url('../images/Settings.Input.Background.png') repeat 0;
}

将其视为:

.selector {
  background: background1, background2, background3, etc;
}

其中background1background2等均为background的简写:

url() repeat X%;