CSS 选择器 [class^="span"] 有什么作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7366323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What does the selector [class^="span"] do?
提问by PhilD
I can't work out what this is:
我无法弄清楚这是什么：
Line 33 of http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css
第 33 行http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css
.row [class^="span"] {
display: inline;
float: left;
margin-left: 20px;
}
I understand the style but I've never seen this before
我了解这种风格，但我以前从未见过这种风格
[class^="span"]
回答by SamGoody
This means a class beginning with the word "span", such as:
这意味着一个以单词“span”开头的类，例如：
<div class="spanning"></div>
The ^symbol is taken from regular expressions, wherein this symbol refers to the beginning of a string.
该^符号取自正则表达式，其中该符号指的是字符串的开头。
It should be noted that this checks for the beginning of the class attribute, not the beginning of the classname. Which means it will not match said selector:
应该注意的是，这会检查类属性的开头，而不是类名的开头。这意味着它不会匹配所述选择器：
<div class="globe spanning"></div>
The above element has two classes, the second of which begins with "span" - but since the attribute classbegins with "globe", not with "span", it will not match.
上面的元素有两个类，第二个类以“span”开头——但由于属性class以“globe”开头，而不是以“span”开头，因此不会匹配。
One could use [class*=span], which would return all classes containing span, but that would also return other classes, such as wingspan.
可以使用[class*=span]，它会返回所有包含 span 的类，但也会返回其他类，例如wingspan.
AFAIK, the way to get classes that begin with a string are to use a double selector:
AFAIK，获取以字符串开头的类的方法是使用双选择器：
.row [class^="span"], .row [class*=" span"]{}
This will return the class beginning with span, whether at the beginning of the attribute, or in the middle.
这将返回以 span 开头的类，无论是在属性的开头还是在中间。
(I also recall working in a solution in the homegrown selector engines used by DOMParser).
（我还记得在DOMParser使用的本地选择器引擎中的解决方案中工作）。
回答by BoltClock
That is an attribute selector, specifically one of the CSS3 substring-matching attribute selectors.
那是一个属性选择器，特别是CSS3 子字符串匹配属性选择器之一。
This rule applies styles to any element whose classattribute begins with span(^=means "starts with"), that occurs in any element with the class row.
此规则将样式应用于class属性以span(^=表示“开头为”) 开头的任何元素，该元素出现在具有 class 的任何元素中row。
回答by Dutchie432
That is a CSS attribute Selector.
那是一个 CSS 属性选择器。
Have a look at http://www.w3.org/TR/css3-selectors/(Section 2)
看看http://www.w3.org/TR/css3-selectors/（第 2 节）
E[foo^="bar"] an E element whose "foo" attribute value begins exactly with the string "bar"
E[foo^="bar"] 一个 E 元素，其 "foo" 属性值恰好以字符串 "bar" 开头
