题 哪些字符在CSS类名/选择器中有效?


CSS类选择器中允许使用哪些字符/符号?我知道以下字符是 无效,但是人物是什么 有效

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

1055
2018-01-15 23:37


起源


相关问题: stackoverflow.com/questions/2812072/... - BalusC
那个utf8字符怎么样?就像我可以输入希腊语一样 - GorillaApe
通过转义它们可以在类名中使用特殊字符 - 在CSS文件中可以定义一个 .hello/world通过转义反斜杠来分类: .hello\2fworld, hello\2f world 要么 hello\/world - wyqydsyq
另一个相关的问题,不是关于“名称的语法”,而是关于“类属性的语法”的时候 表达多个名字。 - Peter Krauss
你也可以使用表情符号。 npmjs.com/package/postcss-modules-emoji-classname - Kevin Suttle


答案:


你可以直接查看 CSS语法

基本上1,名称必须以下划线开头(_),一个连字符(-)或一封信(a - z),后跟任意数量的连字符,下划线,字母或数字。有一个问题:如果第一个字符是连字符,则第二个字符必须2 是一个字母或下划线,名称必须至少2个字符。

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

以连字符或下划线开头的标识符通常保留用于特定于浏览器的扩展,如 -moz-opacity

1 通过包含转义的unicode字符(没有人真正使用),这一切都变得更加复杂。

2 请注意,根据我链接的语法,以两个连字符开头的规则,例如: --indent1, 是无效的。但是,我很确定我在实践中已经看到了这一点。


915
2018-01-15 23:42



注意:W3C表示应该为特定于供应商的CSS扩展(例如,Mozilla浏览器实现的-moz *类)保留使用前导' - '或'_'。 - mipadi
\ -escapes是常用的,但通常主要用于CSS黑客的目的,隔离不支持它们的浏览器。 - bobince
据两年后更新@Pim Jager的评论 w3counter.com/globalstats.php 现在IE6用户不到3%,IE9仅占4%,IE7占9%,IE8占22%。所有版本的Firefox都有28%,所有版本的Chrome都有17%。 - Daniel Earwicker
一切都可以逃脱。 mothereffingcssescapes.com/#--indent1 - Mathias Bynens
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. 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"。所以 - --indent1 无效,需要转义为 \--indent1 (-- 例如iOS上的类中断 - eithed


令我惊讶的是,大多数答案都是错误的。事实证明:

CSS中的CSS类名允许除NUL之外的任何字符。 (如果CSS包含NUL(转义或不转义),则结果未定义。[CSS-字符])

Mathias Bynens的回答 链接到 说明 和 演示 显示如何使用这些名称。 写下来 在CSS代码中,一个类名 可能需要逃避,但这不会改变类名。例如。不必要的过度转义表示与该名称的其他表示看起来不同,但它仍然引用相同的类名。

大多数其他(编程)语言没有转义变量名称(“标识符”)的概念,因此变量的所有表示都必须看起来相同。在CSS中不是这种情况。

请注意,在HTML中无法包含 空格字符(空格,制表符,换行符,换页符和回车符) 在一个 类名属性,因为他们已经将彼此分开了。

因此,如果您需要将随机字符串转换为CSS类名称:处理NUL和空间,并转义(相应地为CSS或HTML)。完成。


138
2017-07-18 12:32



答案的第一行应该是“这里的大多数答案都已过时/只适用于CSS2”。 - Salman A
@SalmanA我所说的答案从一开始就错了。它们既不适用于CSS2.1,CSS2也不适用于CSS1。 - Robert Siemer
@RobertSiemer好点,我动了我的评论 stackoverflow.com/questions/50812118/... (这与此主题的关系从未如此) - Pedi T.


阅读 W3C规范。 (这是CSS 2.1,找到适合您的浏览器假设的版本)

编辑:相关段落如下:

在CSS中,标识符(包括   元素名称,类和ID   选择器)只能包含   字符[a-z0-9]和ISO 10646   字符U + 00A1和更高,加上   连字符( - )和下划线(_);   他们不能用数字或者数字开头   连字符后跟一个数字。   标识符也可以包含转义   字符和任何ISO 10646字符   作为数字代码(见下一项)。对于   例如,标识符“B&W?”也许   写成“B \&W \?”或“B \ 26 W \ 3F”。

编辑2:正如@mipadi在Triptych的回答中指出的那样,就是这样 警告,也在同一个网页上:

在CSS中,标识符可以以“ - ”开头   (破折号)或'_'(下划线)。关键词   和以“ - ”开头的属性名称   或'_'保留   特定于供应商的扩展。这样   特定于供应商的扩展应具有   以下格式之一:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

例子):

例如,如果添加了XYZ组织   描述颜色的属性   东边的边界   显示,他们可能会称之为   -xyz边境东色。

其他已知的例子:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

最初的短划线或下划线是   保证永远不会被用在   任何当前或的财产或关键字   未来的CSS水平。因此典型的CSS   实现可能无法识别这样的   属性,可能会忽略它们   根据处理规则   解析错误。但是,因为   初始短划线或下划线是其中的一部分   语法,CSS 2.1实现者   应始终能够使用   符合CSS的解析器,无论是否   他们支持任何特定于供应商   扩展。

作者应该避免特定于供应商   扩展


64
2018-01-15 23:45



??? “包括元素名称,类”? - Jason S
我指的是关于领先破折号和下划线的第二次编辑,但忘了澄清这一点。对困惑感到抱歉。 - Albin


我在这里深入回答了你的问题: http://mathiasbynens.be/notes/css-escapes

本文还解释了如何转义CSS(和JavaScript)中的任何字符,我做了 一个方便的工具 为此。从那个页面:

如果您要为元素提供ID值 ~!@$%^&*()_+-=,./';:"?><[]{}|`#,选择器看起来像这样:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript的:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

58
2017-07-06 06:41



+1,但为什么你需要有一个名为!! :P - Darryl Hein
@Darryl当然,这是一个非常极端的例子,但是像 class="404-error" 可能很有用。 - Mathias Bynens
我有一个例子:我将语法高亮系统的输出转换为CSS。它有类名“ISO C ++:Types(_t /_类型)”。如果我只替换空格我有有效的类名。 - flying sheep
在您的网站上,您说空格字符可以反斜杠转义。当我在课堂名称中尝试时,我无法让它发挥作用。我注意到这个例子中没有空格。可能吗? - Adamarla
与生活中的大多数事情一样,在CSS中似乎“技术合法到极端”和“理智”之间存在差异。 - Volksman


完整的正则表达式是:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

所以你列出的所有角色除了“-“和”_“如果直接使用,则不允许。但您可以使用反斜杠对它们进行编码 foo\~bar 或使用unicode表示法 foo\7E bar


21
2018-01-16 00:05



为什么 [\200-\377]? [\178-\1114112] 允许在CSS 3中取消转义。 - flying sheep
\377 这里实际上是错的。关于CSS2.1的词法扫描器部分的语法有一个注释,其中指出:“\”377“代表当前Flex版本可以处理的最高字符数(十进制255)。它应该被读作”\ 4177777“(十进制1114111),这是Unicode / ISO-10646中可能的最高代码点。“它也应该来自 \240 同样,不是 \377。我想现在已经7岁了,所以事情可能会有所改变。 - James Donnelly
我相信一个更准确的正则表达式 -?(?:[_a-z]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|(?![\u0000-\u0239]).*|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*。 - James Donnelly
@JamesDonnelly如果您认为需要更新,请随时编辑我的答案。 - Gumbo


对于HTML5 / CSS3类,ID可以从数字开始。


6
2017-10-12 14:04



你有这个来源吗?也许我错过了什么,但是 CSS3选择器规范 链接到 标识符定义 在CSS 2.1规范中,不允许前导数字。 - Ryan
@Ryan:这是一个资源: mathiasbynens.be/notes/html5-id-class - Mathias Bynens
w3.org/TR/2003/WD-css3-syntax-20030813/#characters < - 仍然不允许领先号码等(即使它有效) - Jamie Pate
HTML 5允许类和ID以数字开头(例如 class="1a")。但是,CSS标识符不能以数字开头(例如 .1a 不会工作)。你可以逃脱它,坚韧(例如 .\31 a 要么 .\000031a)。 - Oriol
虽然它通常也适用于CSS,但看起来它仍然不是正式的。 “属性名称和规则名称始终是标识符,必须以字母或连字符开头,后跟字母,然后可以包含字母,数字,连字符或下划线。” - w3.org/TR/css3-syntax/#syntax-description - Stickers


对于那些寻找变通方法的人,可以使用属性选择器,例如,如果您的类以数字开头。更改:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* DOESN'T WORK!! */

对此:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* WORKS :) */

此外,如果有多个类,您需要在我认为的选择器中指定它们。

资料来源:

  1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
  2. 是否有一种解决方法来创建名称以数字开头有效的CSS类?

6
2018-06-23 17:33





我的理解是下划线在技术上是有效的。查看:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

“...... 2001年初发布的规范的勘误表明,下划线首次成为合法的。”

上面链接的文章说永远不会使用它们,然后给出一个不支持它们的浏览器列表,所有这些都是至少用户数量的长冗余。


4
2017-07-31 05:33