CSS报错解析与修复求助：at-rule/selector缺失等三类错误

错误原因及修复方法 #

错误根源 #

你在纯CSS文件中写入了HTML的<style media="screen">标签，这违反了CSS语法规范：

• Error 1和Error 3：CSS解析器会把<style media="screen">识别为无效的选择器/规则，因此提示需要合法的at-rule（比如@media）或选择器。
• Error 2：由于<style...>不是有效的CSS语法结构，解析器找不到对应的{来开启规则块，所以抛出该错误。

修复后的完整CSS代码 #

直接删除那行多余的<style media="screen">即可，修复后的代码如下：

div {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 80px;
    color: #fff;
    position: absolute;
    left: 150px;
    top: 200px;
}

.post-content{
    opacity: 0.5;
    top: 0px;
    left: 0px;
    position: absolute;
}

.thumbnail{
    position: relative;
}

.sqs-audio-embed{
    visibility: hidden;
}

.root{
    --main-bg-color: brown;
}

内容的提问来源于stack exchange，提问作者Sayuru Rehan