为何无法通过#1 .match选择器为指定div下的.match元素设置样式？

哦，这个问题我之前帮同事排查过！核心原因是CSS标识符的命名规则限制，咱们慢慢说清楚：

问题根源 #

HTML5确实允许id属性值以数字开头（比如id="1"是合法的），但CSS里的选择器标识符（比如#后面的id名称）有严格要求：不能以数字开头。当你写#1 .match时，浏览器会把这个选择器判定为无效，直接跳过整个样式规则，所以背景色自然不会生效。而单独的.match类选择器不受这个限制，所以能正常工作。

两种解决办法 #

1. 用属性选择器绕过限制（不用改HTML） #

直接通过匹配id属性值的方式来选择元素，这种写法不受CSS标识符规则约束：

[id="1"] .match {
  background-color: yellow;
}

如果要批量处理id为1、2、3...的元素，也可以这么写：

[id="1"] .match,
[id="2"] .match,
[id="3"] .match {
  background-color: yellow;
}

2. 修改id命名（更推荐） #

从长远来看，给id加个前缀（比如match-1、match-2）会更规范，既符合CSS标识符的命名要求（必须以字母、下划线或连字符开头），也能让代码可读性更强：

<div class="col-lg-3">
  <div id="match-1">
    <p class="match">Match {this.state.matches[0].id}</p>
    <!-- 其他元素 -->
  </div>
</div>

之后就能正常使用id选择器了：

#match-1 .match {
  background-color: yellow;
}

简单总结：HTML和CSS的规则不完全同步，虽然数字开头的id在HTML里合法，但CSS不支持直接用数字作为标识符开头，要么用属性选择器，要么改个合规的id名就行~

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