提问



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


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

最佳参考


您可以直接查看CSS语法。[21]


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


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


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


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


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

其它参考1


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


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


Mathias Bynens回答指向如何使用这些名称的解释和演示的链接。在CSS代码中写下,类名可能需要转义,但这不会改变类名。例如,不必要的过度转义表示看起来与该名称的其他表示不同,但它仍然引用相同的类名。 [24] [25]


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


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


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

其它参考2


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


编辑:相关段落如下:



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



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



  在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的解析器,无论是否
  他们支持任何特定于供应商
  扩展。

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


其它参考3


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


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



  如果您要为元素提供~!@$%^&*()_+-=,./';:"?><[]{}|`#的ID值,则选择器将如下所示:

  
  的 CSS:

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

  
  的 JavaScript的:

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


其它参考4


完整的正则表达式是:


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

其它参考5


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

其它参考6


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


.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类有效?


其它参考7


我的理解是下划线在技术上是有效的。退房:[32]


https://developer.mozilla.org/en/underscores_in_class_and_id_names[34]


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


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