CSS 解惑 - CSS 选择器中含有冒号该怎么写

Question

最近在使用组件的时候，自定义了一个组件，在 html 中写法如下：

<comp:table>
	...
</comp:table>

于是突然就想到，这样的 html 标签，在 css 中该如何写呢？比如下面的写法肯定会报错：

<!-- 错误的写法 -->
comp:table{
    color: red;
}

那么如果对于这种自定义 html 标签，对于 css 来说就是 selector 中有特殊字符了，该怎么处理呢？

解惑

对于 CSS 中含有冒号的写法，在 CSS 专业属于中，叫： Namespace 即命名空间，参考： Using Namespaces with CSS 。

上面的 MSDN 文章中给出的解决方案就是加反斜杠即可：

<!-- 不兼容 IE8 的写法 -->
comp\:table{
    color: red;
}

但是参考了 stackoverflow 中的评论，这种写法在 IE8 以及以下有兼容性问题，所以，最好的办法是将 \: 转义为 \3A ，因为转义后的语法是 CSS2 的标准，参考： Using Namespaces with CSS 。

于是，最终得到正确的答案就是：

<!-- 完美的写法 -->
comp\3Atable{
    color: red;
}

延伸

当然，对于除了冒号，可能还存在各种特殊符号的情况下，css 中该怎么写呢？有人就给出了一个在线的转换网站，大家可以看看： CSS escapes 。

参考

• Handling a colon in an element ID in a CSS selector
• Using Namespaces with CSS
• Characters and case
• CSS escapes