在HTML元素的class属性中放置无效的CSS字符（`@`，`:`，`!`）是否存在已知问题？

Question

将无效的CSS class字符（@，:，!）放入HTML元素的class属性中是否存在已知问题？像这样：

<input type='text' class='compare id:txtSecondary'/>
<input type='text' class='compare @txtSecondary'/>

- Kenneth J

---

很抱歉直言，但在“我也在想，但或许做一些像……”之前你写的任何东西对我来说都没有任何意义。 - Richard JP Le Guen

是的，我在点击“发布”之前应该先阅读我所写的内容。 - Kenneth J

如果您可以使用HTML5，请使用data属性：http://ejohn.org/blog/html-5-data-attributes/ - Mike Robinson

@Mike 如果我不在意兼容性的话，我本可以采用我的第一个解决方案。 - Kenneth J

修改了标题，因为“CSS类”这样的东西实际上并不存在。 - Richard JP Le Guen

Answer 1

CSS有趣的事实！在CSS2的4.1.3章节中，建议书语法和基本数据类型中写道...

标识符也可以包含转义字符和任何ISO 10646字符作为数字代码（见下一项）。例如，标识符“B&W?”可以写成“B\&W\?”或“B\26 W\3F”。

因此，您可以在CSS中包含特殊字符：

<style type="text/css">
    .\@user { /* valid! */
        color:red;
    }
</style>

此外，class属性是一个cdata-list，基本上意味着"除了换行和多个空格之外的任何文本"。

因此，您可以在标记中包含类似以下内容的内容：

<div class="@user">
    This is an @user
</div>

你的问题不是 @ 或者 : 字符，而是你添加的那些空格  。（因为在 class 属性中，空格有特殊含义：“多个类名需要用空格分隔。”）

- Richard JP Le Guen

---

有趣。这里的空格是有意为之的，您可以用空格分隔多个类。 - Kenneth J

据我所知，这在大多数浏览器中都得到了实现。 - Richard JP Le Guen

+1 我知道反斜杠在 CSS 中除了作为 IE hack 之外还有实际用途。 - BoltClock

Answer 2

一种更简单的解决方法是用破折号-或下划线_来分割，它们都在CSS类名中有效。

<input id='txtPrimary' type='text' class='compare id-txtSecondary'/>
<input id='txtSecondary' type='text' />

<input id='txtPrimary' type='text' class='compare id_txtSecondary'/>
<input id='txtSecondary' type='text' />

- TJ L