Что означают квадратные скобки в названиях классов?


Я видел здесь квадратные скобки, которые используются в именах классов:

<input class="validate[required,custom[onlyLetter],length[0,100]]" name="firstname" type="text" />

что означают эти квадратные скобки?

7   51   2010-08-14 17:00:34

7 ответов:

это, скорее всего, используется каким-то валидатором или библиотекой проверки. Класс здесь означает, что проверить это поле, обозначенное validate ключевое слово и нажмите:

required это обязательное поле
custom тип проверки; разрешить только буквы
length должна быть от 0 до 100 символов

Ну, эта информация используется библиотекой проверки jQuery, которую вы разместили ссылке to:)

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

Пример 1:

img[alt="picName"] {width:100px;}

повлияет только

<img src="picName.png" alt="picName" />

в вашем коде, и не повлияет

<img src="picName.png" alt="picName2" />

Пример 2:

далее влияет на все элементы с атрибутом title уточняется:

[title] {border:1px dotted #333;}

Пример 3:

это CSS

p[class~="fancy"]

повлияет на следующий html

<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>

но не повлияет на это:

<p class="fancy-fancy">Privet</p>

Пример 4:

[lang|="en"]

повлияет на элементы с атрибутом lang, который является разделенным дефисом списком слов, начинающихся с "en", например

<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>

примеры 5, 6, 7:(CSS3)

следующий селектор атрибутов влияет на элементы ссылок, значение атрибута href которых начинается со строки " http:".

a[href^="http:"]

следующий селектор атрибутов влияет на элементы изображения, значения атрибутов src которых заканчиваются строкой".формат PNG."

img[src$=".png"]

следующий селектор атрибутов влияет на любой входной элемент, значение атрибута name которого содержит строку "choice".

input[name*="choice"]

помимо прецедента / примера, приведенного OP для скобок в именах классов, есть еще один прецедент, который Гарри Робертс предложил (а позже перестал предлагать) в своем блоге некоторое время назад: группировка связанных классов в разметке где квадратные скобки могут использоваться для группировки

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

...

и что выглядит что-то вроде этого:

<div class="[ foo  foo--bar ]  baz">

где:

  • должно быть более одного "набора" классов.
  • один "набор" должен содержать более чем один класс.

Он также отметил, что добавление скобок полностью допустимо в соответствии со спецификацией html5

нет никаких [ ... ] ограничений на токены, которые авторы могут использовать в атрибут класса...

просто повторяю:

скобки в атрибутах класса - в то время как допустимые имена классов CSS являются на самом деле не предназначены для использования в CSS1 - но скорее, чтобы помочь читабельности в HTML.


Примечания:

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

.\[ {
  color: red;
}
<div class="[">Hi there</div>

вот отличный ресурс, объясняющий более 30 типов селекторов на net.tutsplus.com

ничего. Скобки являются юридическим символом для имен классов без какого-либо специального значения.

в стандартном HTML они не имеют особого значения. Это просто еще один текст.

для плагина проверки jQuery, они делают.

в имени класса нет определенного правила. В вашем примере они почти наверняка используются платформой проверки JavaScript. Это связано с тем, что в HTML вы не можете просто добавить свои собственные атрибуты в теги, поэтому структура проверки использует тот факт, что имена классов CSS могут содержать такие символы, чтобы "хранить" правила проверки в имени класса. Там на самом деле не будет никакого соответствующего класса в таблице стилей- это просто трюк, чтобы работать вокруг ограничений HTML.