Question

声明中有两个CSS语句但序列顺序不同。

.wrap {
    background-color: rgba(255, 255, 255, 0.4);
    min-height:600px;
    background: url('/images/bg.jpg');
    background-size: cover;
    max-width: 100%;
}

和

.wrap {
    background: url('/images/bg.jpg');
    background-size: cover;
    max-width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    min-height:600px;
}

区别在于background: url()和background-color之间元素的顺序，如果在background: url()之后声明background-color并且没有图像可以加载，然后background-color无法生效。似乎background: url()覆盖了background-color。

演示可以从http://jsfiddle.net/yckelvin/ctgc8xzL/

找到

CSS语法中是否有关于声明中元素序列顺序的定义？我读过w3schools.com但没有这样的信息。

Answer 1

使用快捷方式background属性时，任何未指定的背景属性（例如background-color）都将设置为初始默认值。

因此，如果在background之后声明background-color属性而未指定一种颜色，然后背景颜色采用transparent的初始值。

这是CSS规范的一部分：

http://www.w3.org/TR/css3-background/#the-background

Answer 2

background只是多个属性的简写

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

你想要的是设置

background-image: url()分开。或者只使用合并后的所有值。

Answer 3

CSS是级联样式表的缩写（强调我的）。这意味着稍后列出的选择器和属性将覆盖之前的选择器/属性。

想想看，好像有人告诉你“向左走，然后向右走。等等;没关系。走吧，然后再走吧”。您将遵循第二组指令，而不是第一组指令。 CSS以同样的方式工作。

所以使用以下CSS：

div {
    color: green;
    color: red;
}

color: red;将被应用，而color: green;将被覆盖。

通常，无要求以某种方式订购某些属性;你可以在width之前加height，反之亦然，你可以在background: url()之后加background-color。没什么大不了; CSS将以相同的方式应用。

稍微不同的是，有些选择器需要特定的排序。也就是说，a:link, a:visited, a:hover, a:active应该按顺序排列，以避免特殊问题。

Answer 4

CSS的cascading rules指定其他条件相同，后两个冲突的声明获胜。其他事情是平等的，因为background和background-color的声明出现在同一规则中，因此它们具有相同的状态（相同的来源，相同的重要性，相同的特异性）。

声明存在冲突，因为它们都设置了背景颜色。原因是background速记属性始终设置所有背景属性。使用速记时未指定背景颜色时，会将其设置为初始值transparent（当它生效时，表示封闭元素的背景通过）。

因此，尽管代码的第一个版本也是有效的，但在background-color声明不能产生任何影响的意义上它毫无意义。第二个版本首先设置所有背景属性，然后使用另一个声明覆盖背景颜色。这是一种可能的编码风格，虽然有些人可能会说这不是好风格。

如果使用特定的background-image属性而不是速记设置背景图像，则不会出现此问题。（如果图像填满整个元素区域，背景图像可能会导致看不到背景颜色，但这是一个不同的问题。）

CSS元素的序列

4 个答案: