在Safari中忽略带有前缀“ - ”的CSS类

Question

以我个人的风格，我喜欢使用类似命令行参数的语法添加小帮助CSS类，例如

<div class="button --small --red"></div>

但是我今天意识到在Safari和iOS中忽略任何以--为前缀的类，但是在Firefox和Chrome中似乎可以正常工作。这有什么理由吗？

Answer 1

标识符的每CSS 2.1 it is invalid grammar条，并且最新的CSS3（see the "railroad tracks"）建议中的规则相同。以下是CSS 2.1的相关规则：

ident       -?{nmstart}{nmchar}*
nmstart     [_a-z]|{nonascii}|{escape}
nmchar      [_a-z0-9-]|{nonascii}|{escape}

标识符可以以可选的-（0x2d）开头;第二个字符来自受限制的nmstart，不能是-或ASCII数字。

接受--foo作为标识符的浏览器正在使用＆＃34;更放松＆＃34;规则（根据需要分类）。

如果真的想要获得技术/花哨/混淆，任何CP高于0x240的Unicode字符都可以用作第二个字符，因为它符合{nonascii} - 这包括范围广泛的{{3} }。 YMMV关于浏览器互操作性和可持续性：

<div class="button ––small —red"></div>

请不要这样做：第一个是两个EN DASH（0x2013）字符，后者是单个EM DASH（0x2014）字符。祝你好运调试选择器/代码。