如何在CSS属性选择器中匹配Unicode字符？实测多种写法失效

首先明确核心问题：你的HTML代码里<input value="&#97;">会被浏览器自动解析为实际字符"a"，所以DOM中该input的value属性值是字符"a"，而非原始的a字符串。你尝试的几种写法之所以失效，是因为对CSS属性选择器的转义规则理解有误，下面逐个分析错误原因并给出正确方案：

错误写法分析 #

• [value="a"]：这个选择器试图匹配value属性值为字符串a的元素，但浏览器已经把HTML实体解析成了"a"，自然匹配不到。
• [value="U+F52A"]：U+开头的是Unicode码点的标识格式，并非CSS中的转义写法，而且U+F52A对应的是另一个特殊字符，和"a"（U+0061）完全无关。
• [value="\97"]：CSS中使用\转义时，默认是十六进制编码，97是十进制的ASCII码，对应的十六进制是61，所以这个写法本身就不符合CSS转义规则。
• [value="\u97"]：\u是JavaScript的Unicode转义语法，CSS不支持这种写法，因此无法识别。

正确实现方式 #

在CSS属性选择器的字符串中，要匹配Unicode字符，可以使用十六进制转义序列，格式为\加上字符的十六进制码点（可补零到2/4位）。以字符"a"为例，它的ASCII码十进制是97，十六进制是61，所以正确的选择器写法如下：

input {
  width: 50px;
  height: 50px;
  background-color: red;
}

/* 直接写字符（生效） */
[value="a"] {
  background-color: pink;
}

/* CSS十六进制转义写法（生效） */
[value="\61"],
[value="\0061"],
[value="\000061"] {
  background-color: blue;
}

对应的HTML保持不变：

<input value="&#97;">

这样写后，转义的选择器就能正确匹配到value为"a"的input元素，将其背景设为蓝色。

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