浏览器如何匹配css子属性

如文件所述，我们可以在CSS3中定义动画，如

.class1{
    animation: name duration timing-function delay iteration-count direction play-state
}

我想知道除了delay之外，我是否为每个属性（如名称、持续时间、计时函数等）指定了值，然后浏览器如何理解我跳过了delay属性

然后，如果我已经为动画属性指定了所有对应的值，那么它与属性和值是1:1匹配，但是如果希望跳过任何中间属性，例如

.class1 {
    animation: anim 2s cubic-bezier(0 0 1 1) 2 alternate running
}

---

在这里，我跳过了

delay

，所以浏览器如何知道我跳过了

delay

属性，但没有跳过其他属性。

非常粗略，你不会得到一个好的“正式”答案。基本上，浏览器尝试根据规范顺序解析每个值，跳过那些与

动画
属性中对应值不匹配的子属性；因此，它首先看到第一个值是一个有效的
动画名称
，然后第二个值是一个有效的
动画持续时间
，并一直持续到它达到值
2
，该值不是
动画延迟
的有效值，因此，它跳过了
动画延迟
，并检查它是否是有效的
动画迭代计数
，事实就是如此。
您需要更连贯地编写。这似乎是正确的，但我试图将属性background设置为background:#00ff00 url（'smiley.gif'））200px 40px无重复固定边框框。在本例中，我无法输入背景位置后的背景大小值（值为200px 40px）。我尝试输入背景大小值，如背景：#00ff00 url（'smiley.gif'）200px 40px 20px无重复固定边框框；但它不起作用；那么，当你的问题实际上涉及背景时，你为什么还要问动画呢？Spec在
background
shorthand属性中说明，而
background color
应该是最终的值。我的查询是关于css属性的一行声明。这是因为它在背景设置中不起作用。正如您所说，background size随/char一起提供，我已经尝试过了，但仍然面临问题。下面是我设置的背景：url（'smiley.gif'）200px 40px/20px 20px无重复固定边框框#00ff00您的问题是一个特定的速记属性，而不是一般的速记属性，因此当您在处理一个完全不相关的属性时，询问一个属性绝对没有意义。您是否尝试过在
/
两侧留出一个空格？规范中的所有示例都包括两侧的空格。是的，它是有效的。事实上，我是指w3school doc进行css练习，他们没有提到背景道具中的“\”字符。这就是为什么会产生混淆，因为如果我们跳过任何值，浏览器会使用默认值。假设我正在设置背景的位置和大小，比如20px 30px。我想在这里设置位置作为20px和（50%）默认值，大小为30px和（自动）默认值，但它不起作用。所以我问了一个关于css值匹配的问题。以下是链接：