无法定位CSS选择器：数字开头类名的SCSS样式不生效问题求助

嘿，这个问题我太熟了！你碰到的是CSS选择器的核心语法限制——CSS类选择器不能以数字开头，这是W3C制定的规范，浏览器会直接忽略不符合规则的选择器，所以你的h1样式根本没被解析生效。

问题根源 #

你写的.13_steps选择器违反了命名规则：CSS选择器的标识符（类名、ID名）必须以字母（a-z, A-Z）、下划线（_）或连字符（-）开头，后面可以跟数字、字母、下划线、连字符或冒号。直接用数字开头的类名，浏览器无法正确识别这个选择器。

不用修改HTML的解决方案（仅改SCSS） #

既然你没法改动HTML，那就用属性选择器来绕过这个限制。属性选择器是通过匹配元素的class属性值来选中元素，不受标识符命名规则的约束。

你可以把SCSS改成这样：

[class="13_steps"] {
  h1 {
    color: black;
  }
}

如果这个<div>可能同时有多个类名（比如<div class="13_steps other-class">），可以用更灵活的匹配方式：

• 匹配以13_steps开头的类名：[class^="13_steps"]
• 匹配包含13_steps的类名：[class*="13_steps"]

长期优化建议（如果以后能改HTML） #

虽然属性选择器能解决问题，但从代码可维护性和规范角度来说，最好把类名改成以字母开头的格式，比如steps_13或者step-13，这样你就能用常规的类选择器写法：

.steps_13 {
  h1 {
    color: black;
  }
}

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