这是个奇怪的问题,但我想在CSS中匹配 Select 器属性中的Unicode字符

我觉得一个例子胜过千言万语:

在下面的示例中,最后4个 Select 器不起作用

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


/* writing the unicode char is of
course working, but I don't want to past complexe
unicode char in my css */

[value="a"] {
  background-color: pink;
}


/* html notation */

[value="a"],

/* unicode notation */

[value="U+F52A"],

/* css content notation */

[value="\97"],

/* js notation */

[value="\u97"] {
  background-color: blue;
}
<input value="&#97;">

推荐答案

使用Unicode点值的反斜杠和十六进制值的CSS escapes值.

例如,对于a(dec = 97, hex = 0x61),您可以使用\61\000061:

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


/* using hex value https://unicodelookup.com/ */
[value="\61"] {
  background-color: blue;
}
<input value="&#97;">

Css相关问答推荐

CSS Grid,意想不到的差距

在react native中应用阴影

在COLOR-MIX()中使用var()似乎会使其对于不支持COLOR-MIX()的浏览器具有可读性,从而阻止了回退的工作

NextJs - Tailwind css类样式未应用于响应屏幕

InertiaJS - Vue - Laravel:Using CSS Files

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

根据现有值计算CSS变量的新值

滚动弹性盒

混合网格自动布局与固定的行列位置

CSS 不要 Select 包含混合内容的 div 中的第一个元素

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

页脚上方的图像分隔线使用 ::before 伪元素

为什么不能将特定于供应商的伪元素/类组合成一个规则集?

边界半径应该剪辑内容吗?

如何保持标题静态,滚动时始终位于顶部?

如何对齐标签和文本区域?

使用 inline-block 换行?

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

带有一些 LESS 魔法的花式媒体查询

CSS3 过渡:过渡:全部是否比过渡:x慢?