Каковы правила использования пробелов в селекторах атрибутов?

Question

Я читаю спецификацию на селекторах атрибутов, но не могу найти ничего, что говорит, если пробел разрешен. Я предполагаю, что это разрешено в начале, до и после оператора, и в конце. Это правильно?

Answer 1

Правила пробелов в селекторах атрибутов изложены в грамматике. Вот продукция Селекторов 3 для селекторов атрибутов (некоторые токены заменены их строковыми эквивалентами для иллюстрации; S* представляет 0 или более пробельных символов):

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

Конечно, грамматика не очень полезна для тех, кто хочет понять, как писать селекторы атрибутов, так как она предназначена для тех, кто реализует механизм выбора.

Вот простое английское объяснение:

Пробел перед селектором атрибута

Это не рассматривается в приведенной выше продукции, но первое очевидное правило заключается в том, что, если вы присоединяете селектор атрибута к другому простому селектору или псевдоэлементу, не используйте пробел:

a[href]::after

Если вы это сделаете, вместо этого пространство рассматривается как комбинатор-потомок с универсальным селектором, подразумеваемым для селектора атрибута и всего, что может за ним следовать. Другими словами, эти селекторы эквивалентны друг другу, но отличаются от вышеупомянутых:

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

Пробелы внутри селектора атрибутов

Неважно, есть ли у вас пробелы в скобках и вокруг оператора сравнения; Я нахожу, что браузеры, похоже, относятся к ним так, как будто их там не было (но я не тестировал подробно). Все они действительны в соответствии с грамматикой и, насколько я видел, работают во всех современных браузерах:

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

(Очевидно, ломая ^ а также = с пробелом не правильно.)

Если IE7 и IE8 правильно реализуют грамматику, они должны иметь возможность обрабатывать их все.

Если используется префикс пространства имен, пробел между разрешенным префиксом и именем атрибута не допускается.

Это неверно:

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

Это связано с тем, что значение атрибута без кавычек рассматривается как идентификатор, который не включает пробелы (по понятным причинам), а значение в кавычках - как строка. Смотрите эту спецификацию для более подробной информации.

Чтобы предотвратить такие ошибки, я настоятельно рекомендую всегда заключать в кавычки значения атрибутов, будь то в HTML, XHTML (обязательно), XML (обязательно), CSS или jQuery ( когда требуется).

Пробел после значения атрибута

Начиная с селекторов 4, селекторы атрибутов могут принимать флаги в форме идентификатора, появляющегося после значения атрибута. Пока что один флаг был определен для чувствительности к регистру (или, скорее,нечувствительности к регистру):

div[data-foo="bar" i]

Грамматика была обновлена таким образом:

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 и закрывающая скобка необязательна как всегда.