CSS lint 解析错误 - 预期的 LBRACE 错误答案

【问题标题】：CSS lint parsing error - expected LBRACE errorCSS lint 解析错误 - 预期的 LBRACE 错误
【发布时间】：2015-02-05 15:36:54
【问题描述】：

需要帮助。

在 CSS lint 中查看我的 CSS 时，他们不断报告解析错误，即“预期 LBRACE 错误” 这是问题的截图：screenshot

他们在我的右括号上显示问题。我检查了我的代码几次，我就是找不到，可能是什么问题。

我意识到如果我更改关键帧前缀顺序，那么错误会显示在不同的行上（所以并不总是在右括号上）

这是我的代码，请看一下，如果有人在那里看到错误，请告诉我，这是什么，提前谢谢你：

.flat-desktop-content {
    background: url("../images/flat-desktop-content.svg") no-repeat scroll 0 0 transparent;
    background-size: cover;
    width: 360px;
    height: 290px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    -webkit-animation: flat-desktop 6s ease infinite;
       -moz-animation: flat-desktop 6s ease infinite;
            animation: flat-desktop 6s ease infinite;
}

@-webkit-keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px;}
    0% { background-position: 0 0; }
}

@-moz-keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px;}
    0% { background-position: 0 0; }
}

@keyframes flat-desktop {
    0% { background-position: 0 0; }
    50% { background-position: 0 -234px; }
    0% { background-position: 0 0; }
}

【问题讨论】：

您的 linter 是否可能认为嵌套的花括号是非法的？如果是这种情况，那么您的 linter 就不好，因为这会使所有媒体查询都抛出错误。作为测试，尝试删除关键帧内的停靠点（以 n% 开头的行），看看是否可以修复它。如果是这样，请停止使用该 linter！这只是在黑暗中刺伤，让我知道测试结果。
感谢您的意见。我尝试了你的建议，结果是一样的。我还把我的整个css粘贴在那里，里面有很多媒体查询，没有一个被报告为错误，我还有其他几个动画，它们都是ok，只有这个报错。这是一个更复杂的动画示例，它没有错误地通过：link。所以它可能真的只是一个错误，不确定，但它让我很烦

标签： parsing keyframe csslint

【解决方案1】：

CSSLint 不是罪魁祸首。

问题是您的代码中存在导致错误的不可见字符。只需将光标设置到有问题的行和列，然后按退格键即可删除有问题的字符。

如果您将下面的代码复制到 csslint，您将不会收到错误，因为我删除了违规字符。

@keyframes monkey {
    0% { background-position: 0 0; }
    50% { background-position: 0 -100px; }
}

【讨论】：

是的，你是对的，我后来意识到了，但忘了在这里更新。不过谢谢你的回答！

【解决方案2】：

您正在使用csslint.net，它似乎有一个错误。我简化了你的例子，直到我只剩下这个完全有效的 CSS 的简短 sn-p 并且仍然抛出错误。试试看……

@keyframes monkey {
    0% { background-position: 0 0; }
    50% { background-position: 0 -100px; }
}

【讨论】：