javascript - 在 HTML 元素的类属性中放置无效的 CSS 字符 (`@` ,`:` ,`!` 是否存在任何已知问题?

标签 javascript html css cross-browser css-selectors

在 HTML 元素的类属性中放置无效的 CSS 类字符(@:!)是否存在任何已知问题?像这样:

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

最佳答案

CSS 有趣的事实!在 Syntax and Basic Data Types 的第 4.1.3 节中(CSS2)推荐,它说...

Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

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

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

此外,class 属性 is a cdata-list这基本上意味着“any text except new lines and multiple spaces”。

所以你可以在你的标记中包含这样的东西:

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

您的问题不在于 @: 字符,而在于您输入的那些空格 。(因为在class 属性空间意味着一些特殊的东西:“Multiple class names must be separated by white space characters.”)

关于javascript - 在 HTML 元素的类属性中放置无效的 CSS 字符 (`@` ,`:` ,`!` 是否存在任何已知问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3470916/

相关文章:

html - svg 中的媒体查询未按预期工作

css - 从 div 标签 CSS 中移除滚动条

javascript - 当标题的大小(宽度/高度)调整时,元素填充会调整

javascript - 单击页面上的任意位置时关闭元素

javascript - 单击另一个元素时如何显示和隐藏

javascript - 如何制作2个从属选项字段?

php - 链接到选项卡式菜单

html - HTML 中线宽的默认值,或者如何将框高设置为 N 行

javascript - Adobe CS6 和 CC 之间奇怪的脚本更改 - 需要一些解决方法

javascript - 如何从一个按钮单击事件获取另一个按钮单击事件的值