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

Question

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

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

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

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

519 7

html

7 ответов:

Comments

Ничего не найдено.

Sarfraz · Accepted Answer · 2016-01-21 15:26:41

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

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

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

bogatyrjov · Accepted Answer · 2010-08-14 16:37:50

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

Пример 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"]

Danield · Accepted Answer · 2018-06-20 17:24:33

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

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

...

и что выглядит что-то вроде этого:
<div class="[ foo  foo--bar ]  baz">
где:

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

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

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

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

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

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

Примечания:

¹хотя технически, они могут быть использованы при побеге,
.\[ {
  color: red;
}
<div class="[">Hi there</div>

igotux · Accepted Answer · 2016-06-09 14:53:16

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

Jörg W Mittag · Accepted Answer · 2010-08-14 16:03:04

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

James Curran · Accepted Answer · 2010-08-14 16:07:26

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

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

Dan Diplo · Accepted Answer · 2010-08-14 16:09:11

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