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

8 回答

• 7

  完整的正则表达式是：

  -?(?:[_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 对它们进行编码 .

  回复于 2024-04-28T15:42:27+08:00
• 944

  阅读W3C spec . （这是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 's answer, there'中指出这个caveat，也在同一个网页中：

  在CSS中，标识符可以以“ - ”（破折号）或“”（下划线）开头 . 以“ - ”或“”开头的关键字和属性名称保留用于特定于供应商的扩展 . 此类特定于供应商的扩展应具有以下格式之一：' - '供应商标识符' - '有意义的名称
  '_'供应商标识符' - '有意义的名称
  示例：例如，如果XYZ组织添加了一个属性来描述显示器东侧边框的颜色，则可以将其称为-xyz-border-east-color . 其他已知的例子：-moz-box-sizing
  -moz-边界半径
  -wap-ACCESSKEY
  保证初始破折号或下划线永远不会被任何当前或未来的CSS级别用于属性或关键字 . 因此，典型的CSS实现可能无法识别这样的属性，并且可能根据用于处理解析错误的规则来忽略它们 . 但是，因为初始短划线或下划线是语法的一部分，所以CSS 2.1实现者应始终能够使用符合CSS的解析器，无论它们是否支持任何特定于供应商的扩展 . 作者应避免特定于供应商的扩展

  回复于 2024-04-28T15:42:27+08:00
• 5

  对于HTML5 / CSS3类，ID可以从数字开始 .

  回复于 2024-04-28T15:42:27+08:00
• 4

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

  本文还解释了如何转义CSS（和JavaScript）中的任何字符，我也为此做了a handy tool . 从那个页面：

  如果要给元素一个ID值为〜！@ $％^＆*（）_ - =， . /';：“？> <[] {} |＃，选择器将如下所示： CSS：<style> ＃\〜\！\ @ \ \ \％\ ^ \＆\ * \（\）\ _ \ - \ = \，\ . \ / \'\; \：\“\？\> \ <\ [\ ] \\\ {\} \ | \'\＃ { 背景：hotpink; } </样式> JavaScript：<script> // document.getElementById或类似的 document.getElementById（'〜！@ $％^＆*（）_ - =， . / \';：“？> <[] \\ {} |＃'）;
  // document.querySelector或类似的
  $（'＃\〜\！\ @ \ $ \％\ ^ \＆\ * \（\）\ _ \ - \ = \，\ . \ \ / \\ '\; \：\？“\> \ <\ [\] \\\ {\} \ | \`\＃' ）;
  </ SCRIPT>

  回复于 2024-04-28T15:42:27+08:00
• 66

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

  .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 :) */
  

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

  Sources:

  • https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/

  • Is there a workaround to make CSS classes with names that start with numbers valid?

  回复于 2024-04-28T15:42:27+08:00
• 60

  您可以直接在CSS grammar查看 .

  基本上，名称必须以下划线（ _ ），连字符（ - ）或字母（ a - z ）开头，后跟任意数量的连字符，下划线，字母或数字 . 有一个问题：如果第一个字符是连字符，则第二个字符必须是字母或下划线，并且名称长度必须至少为2个字符 .

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

  简而言之，之前的规则转换为以下内容，从W3C spec.中提取：

  在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-z0-9]和ISO 10646字符U 00A1和更高，加上连字符（ - ）和下划线（_） ;它们不能以数字开头，也不能以数字后跟连字符开头 . 标识符还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一项） . 例如，标识符“B＆W？”可以写成“B \＆W \？”或“B \ 26 W \ 3F” .

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

  1通过包含转义的unicode字符（没有人真正使用），这一切都变得更加复杂 .

  2请注意，根据我链接的语法，以两个连字符开头的规则，例如： --indent1 ，无效 . 但是，我在实践中看到了这一点 .

  回复于 2024-04-28T15:42:27+08:00
• 23

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

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

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

  上面链接的文章说从不使用它们，然后给出一个没有的浏览器列表支持它们，就用户数量而言，所有这些都是长期冗余的 .

  回复于 2024-04-28T15:42:27+08:00
• 150

  令我惊讶的是，大多数答案都是错误的 . 事实证明：

  Any character except NUL is allowed in CSS class names in CSS. （如果CSS包含NUL（转义或未转义），则结果未定义 . [CSS-characters]）

  Mathias Bynens' answer链接到explanation和demos，显示如何使用这些名称 . 写在CSS代码中，类名可能需要转义，但这不会改变类名 . 例如 . 不必要的过度转义表示与该名称的其他表示看起来不同，但它仍然引用相同的类名 .

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

  请注意，在HTML中，无法在class name attribute中包含space characters (space, tab, line feed, form feed and carriage return)，因为它们已经将类彼此分开 .

  因此，如果您需要将随机字符串转换为CSS类名称：处理NUL和空间，并转义（相应地为CSS或HTML） . 完成 .

  回复于 2024-04-28T15:42:27+08:00