属性选择器中的未加引号的连字符

Question

我最近遇到了一个奇怪的错误,选择器在缩小后停止工作(使用csswring 3.0.7).有问题的选择器匹配数据属性包含连字符的元素.它在开发中有效但在所有测试的浏览器(Chrome,Firefox,IE11,Edge)上都没有生产.

通过缩小的样式表看后,我发现选择已经从类似转化[data-attr*="-"]到[data-attr*=-].报价已被删除,浏览器拒绝了此报价.

问题是,我找不到任何说明单个连字符需要引号的来源.显然,minifier-authors发现了我的相同来源.

该页面详细说明了规范的相关部分.

因此,CSS中有效的不带引号的属性值是任何不是空字符串的文本字符串,由/[-_\u00A0-\u10FFFF]/完全匹配的转义字符和/或字符组成,并且不以数字或两个连字符或连字符后跟数字开头.

在这种情况下,单个连字符似乎完全有效.

这是一个测试不同场景的jsfiddle.只有在尝试匹配一个单独的,不带引号的连字符时,选择器才会失败.

我错过了什么吗？这不应该是一个有效的选择器吗？

Answer 1

以下是本文引用的CSS2.1规范本身的精确文本:

在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高,加上连字符( - )和下划线( _); 它们不能以数字,两个连字符或连字符后跟数字开头.

如您所见,这似乎并未涉及单个连字符的情况.

但是,查看4.1.1节中的语法,我们发现了以下对标识的标记化:

[-]?{nmstart}{nmchar}*

{nmstart}[_a-z]|{nonascii}|{escape}在身份中表示并且是强制性的.前面的连字符是可选的,但由于连字符没有出现{nmstart},这意味着单个连字符不是有效的CSS标识符.

因此,选择器[data-attr*=-]确实无效,并且必须引用单个连字符以便将其视为字符串.