61

我无法弄清楚这是什么:

http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css第 33 行

.row [class^="span"] {
  display: inline;
  float: left;
  margin-left: 20px;
}

我了解这种风格,但我以前从未见过

[class^="span"]
4

3 回答 3

85

这意味着以“span”一词开头的类,例如:

<div class="spanning"></div>

^符号取自正则表达式,其中该符号指的是字符串的开头。

应该注意的是,这会检查类属性的开头,而不是类名的开头。这意味着它将与所述选择器不匹配:

<div class="globe spanning"></div>

上面的元素有两个类,第二个类以“span”开头——但是由于属性class以“globe”开头,而不是“span”,所以它不会匹配。

可以使用[class*=span],它会返回所有包含 span 的类,但也会返回其他类,例如wingspan.

AFAIK,获取以字符串开头的类的方法是使用双选择器:

.row [class^="span"], .row [class*=" span"]{}

这将返回以 span 开头的类,无论是在属性的开头还是在中间。

(我还记得在DOMParser使用的本地选择器引擎中的解决方案中工作)。

于 2011-11-25T11:01:48.910 回答
37

那是一个属性选择器,特别是CSS3 子字符串匹配属性选择器之一。

此规则将样式应用于class属性以span(^=表示“以”开头) 开头的任何元素,该样式出现在任何具有 class 的元素中row

于 2011-09-09T19:09:24.007 回答
4

那是一个 CSS 属性选择器。

看看http://www.w3.org/TR/css3-selectors/(第2节)

E[foo^="bar"] 一个 E 元素,其 "foo" 属性值正好以字符串 "bar" 开头

于 2011-09-09T19:10:04.287 回答