Question

我不知道为什么会这样，但是

.fade-in
{
    opacity: 0;
    color: #ffffff;
    -webkit-animation: fade-in 2s 2s  ease-in-out;
    -moz-animation: fade-in 2s 2s  ease-in-out;
    -o-animation: fade-in 2s 2s  ease-in-out;
    animation: fade-in 2s 2s  ease-in-out;
}

不起作用。但是，如果我这样做，它会工作并变成白色/不可见（虽然动画不会运行，但这很可能是我的错，因为我还在学习它）：

.test
{

}
.fade-in
{
    opacity: 0;
    color: #ffffff;
    -webkit-animation: fade-in 2s 2s  ease-in-out;
    -moz-animation: fade-in 2s 2s  ease-in-out;
    -o-animation: fade-in 2s 2s  ease-in-out;
    animation: fade-in 2s 2s  ease-in-out;
}

还有其他人经历过这个吗？

Answer 1

这通常意味着垃圾出现在非工作CSS规则之前（通常，紧接在其上方的规则之后）。这种垃圾会干扰选择器，阻止其样式工作。添加虚拟CSS规则只是作为故障保护来防止垃圾干扰您的实际CSS规则。

如果垃圾是非打印字符的形式（这意味着你无法在普通的文本编辑器中看到它们），你可以尝试通过在十六进制编辑器中查看CSS来嗅出它们，或者你可以删除最后}和以下{之间的所有内容（包括大括号，以防万一），重新输入，然后查看是否有效：

.example1
{
    propertyA: value;
    propertyB: value;
} /* Delete starting from this line */

.example2
{ /* Delete everything up to this line */
    propertyC: value;
    propertyD: value;
}

.example1
{
    propertyA: value;
    propertyB: value;
    propertyC: value;
    propertyD: value;
}

...并重新输入。

请务必检查CSS的编码;理想情况下，它应该只编码为UTF-8。

CSS不会工作，除非更多的CSS先于它

1 个答案: