属性选择器的空格规则?

属性选择器中的空格规则在语法中有说明.这是属性选择器的 Selectors 3 产生式(一些标记替换为它们的字符串用于说明的等价物；S* 表示 0 个或多个空白字符):

The rules on whitespace in attribute selectors are stated in the grammar. Here's the Selectors 3 production for attribute selectors (some tokens substituted with their string equivalents for illustration; S* represents 0 or more whitespace characters):

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

当然，对于希望了解如何编写属性选择器的人来说，语法并不是非常有用，因为它是为实现选择器引擎的人准备的.

Of course, the grammar isn't terribly useful to someone looking to understand how to write attribute selectors, as it's intended for someone who's implementing a selector engine.

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

Here's a plain-English explanation:

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

This isn't covered in the above production, but the first obvious rule is that if you're attaching an attribute selector to another simple selector or a pseudo-element, don't use a space:

a[href]::after

如果这样做，则该空间将被视为 后代组合符 相反，属性选择器和任何可能跟随它的东西都隐含了通用选择器.也就是说，这些选择器是等价的，但与上面的不同:

If you do, the space is treated as a descendant combinator instead, with the universal selector implied on the attribute selector and anything that may follow it. In other words, these selectors are equivalent to each other, but different from the above:

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

属性选择器内的空格

括号内和比较运算符周围是否有空格无关紧要；我发现浏览器似乎将它们视为不存在(但我尚未进行广泛测试).根据语法，这些都是有效的，据我所知，它们适用于所有现代浏览器:

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

^(或其他符号)和 = 之间不允许有空格，因为它们被视为单个标记，并且标记不能分开.

Whitespace is not allowed between the ^ (or other symbol) and = as these are treated as a single token, and tokens cannot be broken apart.

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

If IE7 and IE8 implement the grammar correctly, they should be able to handle them all as well.

如果使用 命名空间前缀，则不允许在前缀和属性名称.

If a namespace prefix is used, whitespace is not allowed between the prefix and the attribute name.

这些都不正确:

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

这些是正确的:

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

属性值中的空格

但请注意上面属性值的引号；如果您将它们排除在外，并尝试选择其属性值中包含空格的内容，则会出现语法错误.

Whitespace within the attribute value

But notice the quotes around the attribute values above; if you leave them out, and you try to select something whose attribute has spaces in its value you have a syntax error.

这是不正确的:

div[class=one two]

这是正确的:

div[class="one two"]

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

This is because an unquoted attribute value is treated as an identifier, which doesn't include whitespace (for obvious reasons), whereas a quoted value is treated as a string. See this spec for more details.

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

To prevent such errors, I strongly recommend always quoting attribute values, whether in HTML, XHTML (required), XML (required), CSS or jQuery (once required).

从选择器 4 开始(在此答案的原始发布之后)，属性选择器可以接受出现在属性值之后的标识符形式的标志.定义了两个与 字符大小写有关的标志，一个用于不区分大小写匹配:

As of Selectors 4 (following the original publication of this answer), attribute selectors can accept flags in the form of an identifier appearing after the attribute value. Two flags have been defined pertaining to character case, one for case-insensitive matching:

div[data-foo="bar" i]

还有一个用于区分大小写的匹配(其添加 我参与了，尽管是 WHATWG 的代理):

And one for case-sensitive matching (whose addition I had a part in, albeit by proxy of the WHATWG):

ol[type="A" s]
ol[type="a" s]

语法已更新因此:

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 和右括号之间的空格一如既往是可选的.

In plain English: if the attribute value is not quoted (i.e. it is an identifier), whitespace between it and attrib_flags is required; otherwise, if the attribute value is quoted then whitespace is optional, but strongly recommended for the sake of readability. Whitespace between attrib_flags and the closing bracket is optional as always.

这篇好文章是转载于：学新通技术网