問題描述

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

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?

推薦答案

屬性選擇器中的空格規(guī)則在語法中有說明.這是屬性選擇器的 Selectors 3 產(chǎn)生式(一些標(biāo)記替換為它們的字符串用于說明的等價(jià)物；S* 表示 0 個(gè)或多個(gè)空白字符):

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*
        ]? ']'
  ;

當(dāng)然，對于希望了解如何編寫屬性選擇器的人來說，語法并不是非常有用，因?yàn)樗菫?em>實(shí)現(xiàn)選擇器引擎的人準(zhǔn)備的.

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.

這是一個(gè)簡單的英文解釋:

Here's a plain-English explanation:

這在上面的產(chǎn)生式中沒有涉及，但第一個(gè)明顯的規(guī)則是，如果你將一個(gè)屬性選擇器附加到另一個(gè)簡單的選擇器或偽元素上，不要使用空間:

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

如果這樣做，則該空間將被視為 后代組合符 相反，屬性選擇器和任何可能跟隨它的東西都隱含了通用選擇器.也就是說，這些選擇器是等價(jià)的，但與上面的不同:

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

屬性選擇器內(nèi)的空格

括號(hào)內(nèi)和比較運(yùn)算符周圍是否有空格無關(guān)緊要；我發(fā)現(xiàn)瀏覽器似乎將它們視為不存在(但我尚未進(jìn)行廣泛測試).根據(jù)語法，這些都是有效的，據(jù)我所知，它們適用于所有現(xiàn)代瀏覽器:

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

^(或其他符號(hào))和 = 之間不允許有空格，因?yàn)樗鼈儽灰暈閱蝹€(gè)標(biāo)記，并且標(biāo)記不能分開.

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 正確地實(shí)現(xiàn)了語法，它們應(yīng)該也能處理它們.

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

屬性值中的空格

但請注意上面屬性值的引號(hào)；如果您將它們排除在外，并嘗試選擇其屬性值中包含空格的內(nèi)容，則會(huì)出現(xiàn)語法錯(cuò)誤.

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

這是因?yàn)椴粠б?hào)的屬性值被視為標(biāo)識(shí)符，不包括空格(出于顯而易見的原因)，而帶引號(hào)的值被視為字符串.有關(guān)詳細(xì)信息，請參閱本規(guī)范.

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.

為防止此類錯(cuò)誤，我強(qiáng)烈建議始終引用屬性值，無論是 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 開始(在此答案的原始發(fā)布之后)，屬性選擇器可以接受出現(xiàn)在屬性值之后的標(biāo)識(shí)符形式的標(biāo)志.定義了兩個(gè)與 字符大小寫有關(guān)的標(biāo)志，一個(gè)用于不區(qū)分大小寫匹配:

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]

還有一個(gè)用于區(qū)分大小寫的匹配(其添加 我參與了，盡管是 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*

簡而言之:如果屬性值沒有被引用(即它是一個(gè)標(biāo)識(shí)符)，它和 attrib_flags 之間需要空格；否則，如果引用屬性值，則空格是可選的，但為了便于閱讀，強(qiáng)烈建議使用.attrib_flags 和右括號(hào)之間的空格一如既往是可選的.

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.

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