Question

我无法理解这是什么：

的第33行

.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 substring-matching attribute selectors之一。

此规则将样式应用于class属性以span开头的任何元素（^=表示“以...开头”），这种情况发生在具有类row的任何元素中

Answer 3

这是一个CSS属性选择器。

E [foo ^ =“bar”]一个E元素，其“foo”属性值正好开始用字符串“bar”