属性选择器中空格的规则是什么？ [英] What are the rules around whitespace in attribute selectors?

问题描述

我正在阅读关于属性选择器的规范，但我找不到任何说如果空白是允许的。我猜它是允许在开始，操作员之前和之后，和在结束。这是正确的吗？

I'm reading the spec on attribute selectors, but I can't find anything that says if whitespace is allowed. I'm guessing it's allowed at the beginning, before and after the operator, and at the end. Is this correct?

推荐答案

属性选择器中的空白规则在语法中说明。以下是属性选择器的选择器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:

这不包括在上面的生产中，但第一个明显的规则是if您要将属性选择器附加到另一个简单选择器或伪元素不要使用空格：

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

a 后代组合器，而属性选择器中隐含的通用选择器和任何可能跟随它。换句话说，这些选择器彼此相同，但不同于上述：

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

（显然，打破 ^ 和 = 与一个空格不正确。）

(Obviously, breaking the ^ and = with a space isn't correct.)

如果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]

$ b b

这是正确的：

This is correct:

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开始，属性选择器可以接受属性值后出现的标识符形式的标志。到目前为止，已为区分大小写（或< em>不敏感）：

As of Selectors 4, attribute selectors can accept flags in the form of an identifier appearing after the attribute value. So far, one flag has been defined for case-sensitivity (or rather, case-insensitivity):

div[data-foo="bar" i]

语法已经因此：

The grammar has been updated thus:

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.

这篇关于属性选择器中空格的规则是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！