类名中的方括号是什么意思？

Question

我在这里看到了类名中使用的方括号:

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

这些方括号是什么意思？

Answer 1

方括号用作属性选择器,用于选择具有特定属性值的所有元素.换句话说,它们检测属性存在.

例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元素.

input[name*="choice"]

Answer 2

这很可能是由某种验证器或验证库使用的.这里的类意味着验证由validate关键字表示的此字段,然后:

required它是必填字段
custom验证类型; 只允许字母
length在0到100个字符之间

好吧,这个信息被你发布链接的jQuery验证库使用:)

Answer 3

除了OP给出的类名中括号的用例/例子之外,还有另一个用例,哈利罗伯茨在他的博客中提出了(后来停止提议)一段时间后:在你的标记中对相关的类进行分组括号可用于分组

两个或多个相关的类属性,以便在扫描HTML文件时更容易注意到这些属性

...

看起来像这样:

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

哪里:

• 必须有多个"集合"类.
• 一个'set'必须包含多个类.

他还指出,根据html5规范,添加括号是完全有效的

作者可以在类属性中使用的令牌没有限制......

只是重申:

类属性中的括号 - 虽然是有效的CSS类名实际上并不打算在CSS ^1中使用 - 而是为了帮助HTML中的可读性.

笔记:

¹ 虽然从技术上讲,它们可以在转义时使用,

.\[ {
  color: red;
}

<div class="[">Hi there</div>

Answer 4

没有.括号是类名的合法字符,没有任何特殊含义.

Answer 5

在标准 HTML 中，它们没有特殊含义。这只是更多的文字。

对于 jQuery 验证插件来说，它们确实如此。