問題描述

我正在閱讀關于 屬性選擇器的規范，但是如果允許空格，我找不到任何說明.我猜它在開頭，操作員之前和之后以及最后都是允許的.這是正確的嗎?

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?

推薦答案

屬性選擇器中的空格規則在語法中有說明.這是屬性選擇器的 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.

這篇關于屬性選擇器中的空格規則是什么?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！