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

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

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

这些方括号是什么意思?

这很可能被某种validation器或validation库所使用。 这里的类表示validation由validate关键字表示的这个字段,然后:

required它是必填字段
customvalidationtypes; 只允许字母
length应该在0到100个字符之间

那么这个信息就是你使用的jQueryvalidation库的链接 🙂

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

例1:

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

只会影响

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

在你的代码中,并不会影响

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

例2:

以下内容会影响指定了标题属性的所有元素:

 [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)

以下属性select器会影响其href属性值以string“http:”开头的链接元素。

 a[href^="http:"] 

以下属性select器会影响其src属性值以string“.png”结尾的图像元素。

 img[src$=".png"] 

以下属性select器会影响名称属性值包含string“choice”的任何input元素。

 input[name*="choice"] 

这里有一个很好的资源解释net.tutsplus.com上的30个select器types

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

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

对于jQueryvalidation插件,他们这样做。

除了OP给OPT提供的用于名称括号的例子之外,哈里·罗伯茨(Harry Roberts)在他的博客中提出了另外一个用例(后来停止提出): 把你的标记中的相关类分组括号可以用来分组

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

看起来像这样:

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

哪里:

  • 必须有不止一套“class级”。
  • 一个“集合”必须包含一个以上的类。

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

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

只是重申:类属性中的括号 – 虽然有效的CSS类名实际上并不意味着在CSS中使用( 即使它们可以在转义时使用 ),

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

类名中没有特定的规则。 在你的例子中,它们几乎肯定被JavaScriptvalidation框架所使用。 这是因为在HTML中,不能简单地将自己的属性添加到标记中,因此validation框架正在利用CSS类名称可以包含这些字符的事实,以便将validation规则“存储”到类名称中。 在样式表中实际上不会有相应的类 – 这只是解决HTML限制的一个技巧。