为什么我需要在CSS选择器中使用@的属性值周围的引号？

Question

我使用以下内容来使用占位符访问特定的DOM元素 "Serial"

$('input[placeholder=Serial]')

它工作正常.当我尝试使用以下方法访问它们时,我有一些其他DOM元素具有占位符"@SAL":

$('input[placeholder=@SAL]')

它抛出了这个错误

错误:语法错误,无法识别的表达式:input [placeholder = @ SAL]

但是,当我试图访问相同的使用双引号 "围绕@SAL它的工作罚款.

现在的问题是,为什么$('input[name=Serial]')工作正常,即没有围绕占位符值的双引号但$('input[placeholder=@SAL]')抛出上述错误？

PS我知道根据它们的占位符访问DOM元素是一个坏主意(因为它们可能会改变),但我很好奇为什么它不能在这个特定的情况下工作...

Answer 1

它就在文档中 -

选择器表达式中的属性值必须遵循W3C CSS选择器的规则; 通常,这意味着除了有效标识符之外的任何内容都应该用引号括起来.

http://api.jquery.com/category/selectors/attribute-selectors/

在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0和更高,加上连字符( - )和下划线( _); 它们不能以数字,两个连字符或连字符后跟数字开头.标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项).例如,标识符"B&W？" 可以写成"B \&W \？" 或"B\26 W\3F".

请注意,Unicode是与ISO 10646等效的代码(请参阅[UNICODE]和[ISO10646]).

http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

以"@"开头的选择器不是有效的选择器,但可以通过使用引号或转义相关字符来解决.