如何通过CSS定位包含#字符的类？

问题说明 #

平台更新后，td标签的CSS类从highlight-yellow改为highlight-#fffae6，但CSS选择器无法识别包含#的类名，导致表格背景色不显示。这是因为#在CSS中是ID选择器的特殊标识，直接写在类选择器里会被解析为语法错误。

解决方法 #

对类名中的#进行转义，在CSS选择器里用\#替代原类名里的#即可。

修改后的CSS代码如下：

.wiki-content td.highlight-\#fffae6,
.wiki-content td.highlight-\#fffae6 > p,
.wiki-content tbody tr td.highlight-\#fffae6,
.wiki-content tbody tr td.highlight-\#fffae6 > p {
    background-color: #FFFAE6;
}

也可以使用Unicode转义序列\23（#的Unicode编码为U+0023），效果完全一致：

.wiki-content td.highlight-\23fffae6,
.wiki-content td.highlight-\23fffae6 > p,
.wiki-content tbody tr td.highlight-\23fffae6,
.wiki-content tbody tr td.highlight-\23fffae6 > p {
    background-color: #FFFAE6;
}

补充说明 #

• HTML中的类名无需修改，保持highlight-#fffae6即可，转义仅针对CSS选择器内的特殊字符。
• 若CSS类名包含!、@、$等其他特殊字符，同样需要用反斜杠\转义才能被正确识别。

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