属性选择器中的空格规则在语法中有所描述.这是属性选择器的 Selectors 3生产(一些标记用其字符串等价物代替说明; S *表示0或更多的空格字符)：

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

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

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

属性选择器之前的空格

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

a[href]::after

如果你这样做,空格被视为一个descendant combinator,而通用选择器隐含在属性选择器和任何可能跟随它.换句话说,这些选择器相当于彼此,但与上述不同：

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

属性选择器中的空格

您是否在括号内和周围的比较运算符之间有任何空格并不重要;我发现浏览器似乎把它们看作是不存在的(但是我还没有广泛测试).根据语法,这些都是有效的,据我所见,在所有现代浏览器中都可以使用：

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

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

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

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

这些是不正确的：

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"]

这是因为未引用的属性值被视为标识符,不包括空格(因为明显的原因),而引用的值被视为字符串.详见this spec.

为了防止这种错误,我强烈建议您始终引用属性值,无论是HTML,XHTML(必需),XML(必需),CSS或jQuery(once required).

空格后的属性值

对于选择器4,属性选择器可以接受在属性值之后出现的标识符的形式的标志.到目前为止,已经为case-sensitivity定义了一个标志(或者说是不区分大小写)：

div[data-foo="bar" i]

因此语法已经是updated：

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和关闭括号之间的空格是可选的.

@H_301_2@ @H_301_2@ 原文链接：https://www.f2er.com/css/217268.html