Question

我看到了类名中使用的here方括号：

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

以下属性选择器会影响名称属性值包含字符串“choice”的任何输入元素。

input[name*="choice"]

Answer 2

这很可能被某种验证器或验证库使用。此处的类表示验证此字段由validate关键字表示，然后：

required需要字段
custom验证类型;只允许字母
length应介于0到100个字符之间

嗯，这个信息由您发布link的jQuery验证库使用：）

Answer 3

除了OP给出的类名中括号的用例/例子之外，还有另一个用例，哈利罗伯茨在他的博客中提出（后来停止提议）：grouping related classes in your markup其中方括号可用于分组

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

...

看起来像这样：

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

其中：

必须有多个“套”类。

一个'set'必须包含多个类。

他还指出，根据html5规范

添加括号是完全有效的

作者可以使用的令牌没有限制 class attribute ...

重申：

类属性中的括号 - 虽然有效的CSS类名称实际上并不意味着在CSS ¹中使用 - 而是为了帮助HTML中的可读性

注意：

¹ Although technically, they can be used when escaped，

.\[ {
  color: red;
}

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

Answer 4

无。括号是类名的合法字符，没有任何特殊含义。

Answer 5

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

对于jQuery Validation插件，他们可以。

Answer 6

类名中没有特定的规则。在您的示例中，它们几乎肯定被JavaScript验证框架使用。这是因为在HTML中，您不能简单地将自己的属性添加到标记中，因此验证框架利用了CSS类名称可以包含此类字符的事实，以便将验证规则“存储”在类名中。样式表中实际上不会有任何相应的类 - 这只是解决HTML限制的一种技巧。

Answer 7

示例：

[what-ever] {
    color: red;
}

<p what-ever>Hello</p>

这将使你好红色。您可以使用方括号作为类名

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

7 个答案: