这个 CSS 选择器是什么？[类* =“跨度”]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9836151/
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 is this CSS selector? [class*="span"]
提问by jon
I saw this selector in Twitter Bootstrap:
我在 Twitter Bootstrap 中看到了这个选择器：
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
Does anyone know what this technique is called and what it does?
有谁知道这种技术叫什么，它有什么作用？
回答by isNaN1247
It's an attribute wildcard selector. In the sample you've given, it looks for any child element under .show-gridthat has a class that CONTAINS span.
它是一个属性通配符选择器。在您提供的示例中，它查找.show-grid具有 CONTAINS 类的任何子元素span。
So would select the <strong>element in this example:
所以会选择<strong>这个例子中的元素：
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
You can also do searches for 'begins with...'
您还可以搜索“以...开头”
div[class^="something"] { }
which would work on something like this:-
这将适用于这样的事情：-
<div class="something-else-class"></div>
and 'ends with...'
和'以......结束'
div[class$="something"] { }
which would work on
这将适用于
<div class="you-are-something"></div>
Good references
很好的参考
回答by Spikeh
.show-grid [class*="span"]
It's a CSS selector that selects all elements with the class show-grid, that has a child element who's class containsthe name span.
它是一个 CSS 选择器，它选择类show-grid 的所有元素，它有一个子元素，其类包含名称span。
回答by Kevin Li
It selects all elements where the class name contains the string "span"somewhere. There's also ^=for the beginning of a string, and $=for the end of a string. Here's a good reference for some CSS selectors: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
它选择类名在"span"某处包含字符串的所有元素。还有^=字符串的开头和字符串$=的结尾。这是一些 CSS 选择器的很好参考：http: //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
I'm only familiar with the bootstrap classes spanXwhere X is an integer, but if there were other selectors that endedin span, it would also fall under these rules.
我只熟悉自举类spanX，其中X是一个整数，但如果有其它选择是结束在span，它也将属于这些规则。
It just helps to apply blanket CSS rules.
它只是有助于应用全面的 CSS 规则。
回答by Tyler
The Following:
下列：
.show-grid [class*="span"] {
means that all child elements of '.show-grid' with a class that CONTAINS the word 'span' in it will acquire those CSS properties.
意味着 '.show-grid' 的所有子元素的类中包含单词 'span' 将获得这些 CSS 属性。
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
All of the elements get hit except for the <span>by itself.
除了<span>本身之外，所有元素都被击中。
In Regards to Bootstrap:
关于 Bootstrap：
span6: this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thusspan6would have a width of 50%.- In the current day implementation of Bootstrap (v.3 and v.4), you now use the
.col-*classes (e.g.col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1and Bootstrap 3.3.7for more documentation. I would recommend going with a later Bootstrap nowadays
span6：这是 Bootstrap 2 的脚手架技术，它根据 12 个部分将一个部分分成一个水平网格。因此span6宽度为 50%。- 在 Bootstrap（v.3 和 v.4）的当前实现中，您现在使用
.col-*类（例如col-sm-6），它还指定了一个媒体断点来处理窗口缩小到特定大小以下时的响应。查看Bootstrap 4.1和Bootstrap 3.3.7以获取更多文档。我建议现在使用较晚的 Bootstrap
