如何解决CSS出现at-rule or selector expected和{ expected两类报错问题

你遇到的两类报错都是CSS基础语法错误，具体触发原因和解决方法如下： #

1. at-rule or selector expectedcss(css-ruleorselectorexpected) #

触发原因 #

CSS解析器在预期要读取@规则或选择器的位置，读到了不符合语法规范的内容，常见场景：

• CSS属性直接写在样式表全局，没有包裹在选择器的{}内部
• 前面的样式块遗漏了闭合的}，导致后续代码语法识别错位
• 使用了Sass/Less等预处理器语法，但文件后缀为.css没有经过编译
• 选择器、@规则关键字拼写错误

解决方法 #

• 检查报错行的前置所有样式块，确认全部正确闭合}
• 确认所有CSS属性都包裹在对应选择器的{}内，没有直接暴露在全局
• 如果使用预处理器语法，将文件后缀改为对应格式（.scss/.less等），或配置对应编译工具

2. { expectedcss(css-lcurlyexpected) #

触发原因 #

CSS解析器在预期要读取左大括号{的位置没有找到对应符号，常见场景：

• 选择器写完后遗漏了{
• @规则（如@media、@keyframes）写完触发条件后遗漏了{
• 选择器存在语法错误（比如类名包含非法特殊字符），导致解析器无法识别选择器结束位置

解决方法 #

• 定位到报错提示的对应行，检查该行的选择器或@规则后是否正确跟上{
• 检查选择器语法是否符合规范，没有非法字符或遗漏标点

报错对应截图参考：

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