我在 Twitter Bootstrap 中看到了这个选择器：
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
有谁知道这种技术叫什么以及它的作用是什么？
【问题讨论】：
标签： css css-selectors
它选择类名在某处包含字符串"span" 的所有元素。还有^= 用于字符串的开头，$= 用于字符串的结尾。这是一些 CSS 选择器的a good reference。
我只熟悉引导类 spanX，其中 X 是一个整数，但如果有其他选择器结束在 span 中，它也属于这些规则。
它只是有助于应用一揽子 CSS 规则。
【讨论】：
.show-grid [class*="span"]
这是一个 CSS 选择器，它选择所有具有类 show-grid 的元素，该类具有一个子元素，其类包含名称为 span。
【讨论】：
show-grid的元素。它选择类名包含“span”的那些元素的后代（不仅仅是子元素）。这可能听起来很迂腐，但这是一个重要的逻辑区别。
以下：
.show-grid [class*="span"] {
意味着 '.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>
除了<span> 本身之外，所有元素都会被命中。
关于引导程序：
span6：这是 Bootstrap 2 的脚手架技术，它根据 12 的部分将一个部分划分为水平网格。因此，span6 的宽度为 50%。.col-* 类（例如 col-sm-6），它还指定了一个媒体断点来处理窗口缩小到低于一定大小。查看Bootstrap 4.1 和Bootstrap 3.3.7 以获取更多文档。我建议现在使用以后的 Bootstrap【讨论】：
这是一个属性通配符选择器。在您提供的示例中，它会在 .show-grid 下查找任何具有包含 span 的类的子元素。
在本例中选择<strong> 元素：
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
您还可以搜索“以...开头”
div[class^="something"] { }
这将适用于这样的事情：-
<div class="something-else-class"></div>
并且'以...结尾'
div[class$="something"] { }
这将起作用
<div class="you-are-something"></div>
良好的参考
【讨论】：
div[class^="something"] { } "starts with" 选择器仅在元素包含一个类或多个类时才有效，前提是该类是左侧的第一个类。
div[class~="something"] 以在空格分隔的列表（例如类）中查找匹配项，并添加 div[class|="something" 以匹配连字符分隔的列表，例如匹配上面you-are-something类名中的东西