围绕属性选择器中的空格有哪些规则？

Question

我正在阅读关于属性选择器的规范,但我找不到任何说明是否允许空格的内容.我猜测它在开始时,操作员之前和之后以及最后都是允许的.它是否正确？

Answer 1

关于属性选择器中的空格的规则在语法中说明.这是属性选择器的选择器3生成(一些标记用其等效字符串替换,用于说明; S*代表0或更多空白字符):

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ '^=' |
            '$=' |
            '*=' |
            '=' |
            '~=' |
            '|=' ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

当然,语法对于想要了解如何编写属性选择器的人来说并不是非常有用,因为它适用于正在实现选择器引擎的人.

这是一个简单的英文解释:

属性选择器之前的空格

这在上面的产品中没有涉及,但第一个明显的规则是,如果要将属性选择器附加到另一个简单选择器或伪元素,请不要使用空格:

a[href]::after

如果这样做,则该空间将被视为后代组合子,而通用选择器隐含在属性选择器上以及可能跟随它的任何内容.换句话说,这些选择器彼此相同,但与上述不同:

a [href] ::after
a *[href] *::after

属性选择器内的空格

在括号内和比较运算符周围是否有任何空格并不重要; 我发现浏览器似乎把它们视为不在那里(但我没有进行过广泛的测试).根据语法,这些都是有效的,据我所见,在所有现代浏览器中都可以使用:

a[href]
a[ href ]
a[ href="http://stackoverflow.com" ]
a[href ^= "http://"]
a[ href ^= "http://" ]

(显然,突破^并=用空格是不正确的.)

如果IE7和IE8正确实现了语法,那么它们也应该能够处理它们.

如果使用名称空间前缀,则前缀和属性名称之间不允许使用空格.

这些是不正确的:

unit[sh| quantity]
unit[ sh| quantity="200" ]
unit[sh| quantity = "200"]

这些是正确的:

unit[sh|quantity]
unit[ sh|quantity="200" ]
unit[sh|quantity = "200"]

属性值中的空格

但请注意上面属性值的引号; 如果你把它们遗漏了,并且你试图选择其属性在其值中有空格的东西,那么你会遇到语法错误.

这是不正确的:

div[class=one two]

这是对的:

div[class="one two"]

这是因为不带引号的属性值被视为标识符,其不包括空格(出于显而易见的原因),而引用的值被视为字符串.有关详细信息,请参阅此规范.

为了防止此类错误,我强烈建议始终引用属性值,无论是HTML,XHTML(必需),XML(必需),CSS还是jQuery(一旦需要).

属性值后的空格

从选择器4开始,属性选择器可以接受在属性值之后出现的标识符形式的标志.到目前为止,已经为区分大小写(或者更确切地说,不区分大小写)定义了一个标志:

div[data-foo="bar" i]

语法已更新如下:

attrib
  : '[' S* attrib_name ']'
    | '[' S* attrib_name attrib_match [ IDENT | STRING ] S* attrib_flags? ']'
  ;

attrib_name
  : wqname_prefix? IDENT S*

attrib_match
  : [ '=' |
      PREFIX-MATCH |
      SUFFIX-MATCH |
      SUBSTRING-MATCH |
      INCLUDE-MATCH |
      DASH-MATCH
    ] S*

attrib_flags
  : IDENT S*

用简单的英语:如果没有引用属性值(即它是一个标识符),attrib_flags则需要它之间的空格; 否则,如果引用属性值,则空格是可选的,但强烈建议为了便于阅读.两端之间attrib_flags和结束括号之间的空格是可选的.