Html 类名中的方括号是什么意思？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3483391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What do square brackets in class names mean?
提问by Misha Moroshko
采纳答案by Sarfraz
That is most likely used by some sort of validator or validation library. The class here means that validate this field denoted by validatekeyword and then:
这很可能被某种验证器或验证库使用。这里的类意味着验证由validate关键字表示的这个字段，然后：
requiredit is required fieldcustomvalidation type; allow only letterslengthshould be between 0 to 100 chars
required它是必填字段custom验证类型；只允许字母length应介于 0 到 100 个字符之间
Well, this information is used by the jQuery validation library you posted the linkto :)
好吧，此信息由您发布链接的 jQuery 验证库使用:)
回答by bogatyrjov
The square brackets are used as an attribute selector, to select all elements that have a certain attribute value. In other words, they detect attribute presence.
方括号用作属性选择器，用于选择具有特定属性值的所有元素。换句话说，它们检测属性存在。
Example 1:
示例 1：
img[alt="picName"] {width:100px;}
would affect only
只会影响
<img src="picName.png" alt="picName" />
in your code, and won't affect
在您的代码中，不会影响
<img src="picName.png" alt="picName2" />
Example 2:
示例 2：
The following affects all elements with title attribute specified:
以下影响指定了 title 属性的所有元素：
[title] {border:1px dotted #333;}
Example 3:
示例 3：
This CSS
这个 CSS
p[class~="fancy"]
will affect the following html
会影响下面的html
<p class="fancy">Hello</p>
<p class="very fancy">Hola</p>
<p class="fancy maybe">Aloha</p>
but won't affect this:
但不会影响这个：
<p class="fancy-fancy">Privet</p>
Example 4:
示例 4：
[lang|="en"]
will affect elements with lang attribute, which is hyphen-separated list of words beginning with “en”, like
将影响具有 lang 属性的元素，这是以“en”开头的以连字符分隔的单词列表，例如
<div lang="en">Tere</div>
<div lang="en-gb">GutenTag</div>
Examples 5, 6, 7:(CSS3)
示例 5、6、7：(CSS3)
The following attribute selector affects link elements whose href attribute value starts with the string “http:”.
以下属性选择器影响其 href 属性值以字符串“http:”开头的链接元素。
a[href^="http:"]
The following attribute selector affects image elements whose src attribute values ends with the string “.png”.
以下属性选择器影响 src 属性值以字符串“.png”结尾的图像元素。
img[src$=".png"]
The following attribute selector affects any input element whose name attribute value contains the string “choice”.
以下属性选择器会影响 name 属性值包含字符串“choice”的任何输入元素。
input[name*="choice"]
回答by Danield
Apart from the use-case / example given by the OP for brackets in class names, there is also another use case which Harry Roberts proposed (and later stopped proposing) in his blog a while back: grouping related classes in your markupwhere the square brackets could be used to group
除了 OP 为类名中的括号给出的用例/示例之外，还有另一个用例，Harry Roberts 不久前在他的博客中提出（后来停止提出）：将标记中的相关类分组括号可用于分组
two or more related class attributes to make them easier to notice when scanning an HTML file
...
and that looks something like this:
两个或多个相关的类属性，以便在扫描 HTML 文件时更容易注意到它们
...
看起来像这样：
<div class="[ foo foo--bar ] baz">
where:
在哪里：
- There must be more than one ‘set' of classes.
- One ‘set' must contain more than one class.
- 必须有多个“一组”类。
- 一个“集合”必须包含多个类。
He also noted that adding the brackets is completely valid according to the html5 spec
他还指出，根据 html5 规范，添加括号是完全有效的
There are no […] restrictions on the tokens authors can use in the class attribute…
对作者可以在 class 属性中使用的令牌没有 [...] 限制...
Just to reiterate:
只是重申：
The brackets in the class attributes - while being valid CSS class names are not actually meant to be used in the CSS1- but rather to help readability in the HTML.
类属性中的括号——虽然是有效的 CSS 类名，但实际上并不打算在 CSS 1 中使用——而是为了帮助 HTML 中的可读性。
Notes:
笔记：
1Although technically, they can be used when escaped,
.\[ {
color: red;
}<div class="[">Hi there</div>回答by J?rg W Mittag
Nothing. Brackets are a legal character for class names with no special meaning whatsoever.
没有。括号是类名的合法字符，没有任何特殊含义。
回答by James Curran
In standard HTML, they have no particular meaning. It's just more text.
在标准 HTML 中，它们没有特别的意义。这只是更多的文字。
To the jQuery Validation plugin, they do.
对于 jQuery Validation 插件，他们做到了。
回答by Dan Diplo
There is no particular rule within a class name. In your example they are almost certainly being used by a JavaScript validation framework. This is because in HTML you can't simply add your own attributes to tags, therefore the validation framework is exploiting the fact that CSS class names can contain such characters in order to 'store' the validation rules within the class name. There won't actually be any corresponding class in the style-sheet - this is just a trick to work around the limitations of HTML.
类名中没有特定的规则。在您的示例中，它们几乎肯定会被 JavaScript 验证框架使用。这是因为在 HTML 中，您不能简单地将自己的属性添加到标签，因此验证框架正在利用 CSS 类名称可以包含此类字符的事实，以便在类名称中“存储”验证规则。样式表中实际上不会有任何相应的类 - 这只是解决 HTML 限制的一个技巧。
