选择器[class^="span"]是什么意思？

Question

61

我无法理解这是什么意思：

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

我理解这种样式，但我从未见过这样的东西

[class^="span"]

- PhilD

@Gupta：那不是正确的编辑。你实际上是把答案编辑到标题中。此外，我在我的答案中使用了所有这些术语，所以这个编辑甚至都不必要。 - BoltClock

3个回答

37

这是一个属性选择器，具体来说是 CSS3子字符串匹配属性选择器之一。

此规则将样式应用于任何具有以 span 开头的 class 属性的元素（^= 表示 "以...开始"），出现在具有 row 类的任何元素中。

- BoltClock

7

记住，两者之间的空格很重要；这是后代选择器，因此.row [class^="span"]和.row[class^="span"]不是相同的。 - BoltClock

1

有关属性选择器周围的空白更多信息可以在此答案中找到。 - BoltClock

4

这是一个CSS属性选择器。

E[foo^="bar"]是一种E元素，其"foo"属性值以字符串"bar"开头

- Dutchie432

3

每次我试图从http://www.w3.org的阅读中弄清楚一些事情，我总是会睡着。谢谢你的回复……我现在有点明白了。 - PhilD

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SamGoody · Accepted Answer

这意味着以单词“span”开头的类，例如：

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

^符号来自正则表达式，在此符号表示字符串的开头。

需要注意的是，这检查的是类属性的开头，而不是类名的开头。这意味着它不会匹配以下选择器：

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

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

可以使用[class*=span]，这将返回包含span的所有类，但也会返回其他类，例如wingspan。

据我所知，获取以字符串开头的类的方法是使用双选择器：

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

这将返回以span开头的类，无论它是否在属性开头或中间。

（我还记得在DOMParser使用的自制选择器引擎中解决过此问题。）