屬性選擇器中的未加引號的連字符

Question

我最近遇到了一個奇怪的錯誤，選擇器在縮小后停止工作（使用csswring 3.0.7）。 有問題的選擇器匹配數據屬性包含連字符的元素。 它在開發中有效但在所有測試的瀏覽器（Chrome，Firefox，IE11，Edge）上都沒有生產。

在查看縮小的樣式表后，我發現選擇器已經從[data-attr*="-"]為[data-attr*=-] 。 報價已被刪除，瀏覽器拒絕了此報價。

問題是，我找不到任何說明單個連字符需要引號的來源。 顯然，minifier-authors發現了我的相同來源。

該頁面詳細說明了規范的相關部分。

因此，CSS中有效的不帶引號的屬性值是任何不是空字符串的文本字符串，由轉義字符和/或匹配/[-_\ -\ჿFF]/完全匹配的字符組成，並且不以數字或兩個連字符或連字符后跟數字。

在這種情況下，單個連字符似乎完全有效。

這是一個測試不同場景的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}並且在ident中是必需的。 前面的連字符是可選的，但由於連字符沒有出現在{nmstart} ，這意味着單個連字符不是有效的CSS標識符。

因此，選擇器[data-attr*=-]確實無效，並且必須引用單個連字符以便將其視為字符串。