Question

关于CSS3 背景中的选择器的正确顺序，HTML5微软认证中存在一些问题...但是我搜索，搜索了......但是找不到某个地方的有效参考资料该速记中的实际顺序优先级（如果有的话）......

the W3C recommendation on this matter在这个问题上不是很明确（至少，找到这些信息并不明显）....

是古老的CSS2“看，我说唱”（CIRAP）acronim或多或少吸引人......但即使有W3C没有明确表达订单？！...

如果没有人知道标准，那么这些问题在证书中的含义是什么？最后，CSS3中的正确顺序是什么？

他们的例子令人困惑......以前，以下信息表明订单是 CIRAPCOS

另一个例子显示了等价：

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

然后规范提到：

给定一个有效的声明，对于每一层，速记首先设置每个'background- 图像'的相应图层， 'background- position '，'background- size '，'background- repeat '， 'background- origin '，'background- 剪辑'和'background- 附件'到该属性的初始值，然后分配任何显式值在声明中为此图层指定。最后 'background- color '设置为指定的颜色（如果有），否则设置为它的初始值。

所以，这就是我们获取 IPSROClACo

的方式

Answer 1

是明确写的：

<强>值：

[ <bg-layer> , ]* <final-bg-layer>

<强>其中：

<bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
<final-bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
    || <'background-color'>

一个例子，它给我们 IPSRABC ：

background: 
    url("content.jpg") 
    left top / 200px 70px
    no-repeat
    scroll
    content-box content-box
    white;
/* or */
background-image: url("content.jpg") ;
background-position: left top;
background-size: 200px 70px;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: content-box;
background-origin: content-box;
background-color: white;

如果你想要一个助记符，这里就是一个（而且，我完全打开任何更好的句子！）：

我先生，先生，艾比！看？（IPSRABC）

注意：您可以将background-repeat放在background-position / background-size之前，这样可以 IRPSABC 。

Answer 2

问：CSS3背景中的 ~~selectors~~ 值的正确顺序是什么？

答：任何订单

background州的

MSDN文档 ......

以下空格分隔的最多五个值，任意顺序：


颜色 - background-color属性可用的任何颜色值范围。

图片 - background-image属性可用的任何图像值范围。

重复 - background-repeat属性可用的任何重复值范围。

附件 - background-attachment属性可用的任何附件值范围。

位置 - background-position属性可用的任何位置值范围。

MSDN文档缺少更新的CSS3速记属性，但答案仍然是......任何订单

进一步深入研究background的 MDN文档（其中包括CSS3语法）状态......

以下一项或多项，任意顺序：

＆LT; '背景附件' ＆GT;见背景附件

＆LT; '背景剪辑' ＆GT;见背景剪辑

＆LT; '背景颜色' ＆GT;见背景颜色

＆LT; '背景图像' ＆GT;见背景图片

＆LT; '背景原点' ＆GT;见背景原点

＆LT; '背景位置' ＆GT;见背景位置

＆LT; '背景重复' ＆GT;见背景重复

＆LT; '背景尺寸' ＆GT;见背景大小。必须在background-position之后指定此属性，并以“/”字符分隔。

一个基本的例子：jsfiddle example

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}

Answer 3

Microsoft指定的正确顺序是：

颜色
位置
尺寸
重复
来源
剪辑
附接
图像

Answer 4

由于以下原因，我学会了根本不使用read_line速记属性：

跨浏览器和编辑器的混合实施
它将缺少的属性设置为其初始值 - 这将覆盖以前设置的任何值
某些属性共享相同的值，这会引起很多混淆。

在这种特殊情况下，选择清晰度和一致性而不是性能。我还要提一下，性能提升可以忽略不计。

来源：Todd McLeod

CSS3中的背景速记顺序

4 个答案: