选择器[class ^ ="span"]做什么？

Question

我无法弄清楚这是什么:

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

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

[class^="span"]

Answer 1

这意味着以"span"开头的类,例如:

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

该^符号从正则表达式进行的,其中该符号指的是字符串的开头.

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

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

上面的元素有两个类,第二个以"span"开头 - 但由于属性class以"globe"开头,而不是"span",因此它不匹配.

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

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

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

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

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

Answer 2

这是一个属性选择器,特别是CSS3子串匹配属性选择器之一.

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

请记住,两者之间的空间是重要的; 它是后代选择器,所以`.row [class ^ ="span"]`与`.row [class ^ ="span"]`不同. (7认同)
@ Floradu88:是的,确实如此. (2认同)