选择器 [class^="span"] 有啥作用？

Posted 2023-03-06

【中文标题】选择器 [class^="span"] 有啥作用？

【英文标题】：What does the selector [class^="span"] do?选择器 [class^="span"] 有什么作用？

【发布时间】：2011-11-14 01:04:15

【问题描述】：

我不知道这是什么：

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"]

【问题讨论】：

@Gupta：这不是正确的编辑。您实际上是在将答案编辑到标题中。此外，我在回答中使用了所有这些术语，因此甚至不需要编辑。

【参考方案1】：

表示以“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 使用的本土选择器引擎中的解决方案中工作过）。

【参考方案2】：

那是一个 CSS 属性选择器。

看看http://www.w3.org/TR/css3-selectors/（第2节）

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

【讨论】：

每次我试图从阅读w3.org 中找出一些东西时，我总是睡着了。感谢您的回复...我现在有点明白了

【参考方案3】：

这是一个属性选择器，特别是CSS3 substring-matching attribute selectors之一。

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

【讨论】：

记住中间的空格很重要；它是后代选择器，所以.row [class^="span"] 与.row[class^="span"] 不同。

更多关于属性选择器周围的空格可以在this answer找到。