这是什么CSS选择器？[class * =“ span”]

我在Twitter Bootstrap中看到了这个选择器：

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

有谁知道这种技术叫什么及其作用？

这是一个属性通配符选择器。在给出的示例中，它将查找.show-grid该类下具有CONTAINS类的任何子元素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>

很好的参考

• CSS3属性选择器：子字符串匹配
• 您必须记住的30个CSS选择器
• W3C CSS3选择器

.show-grid [class*="span"]

这是一个CSS选择器，用于选择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>by本身外，所有其他元素均会受到打击。

关于引导程序：

• span6：这是Bootstrap 2的脚手架技术，该技术基于12个部分将一个部分分成水平网格。因此span6宽度为50％。
• 在当今的Bootstrap实现中（v.3和v.4），您现在使用.col-*类（例如col-sm-6），该类还指定了媒体断点以在窗口缩小到特定大小以下时处理响应性。查看Bootstrap 4.1和Bootstrap 3.3.7了解更多文档。我建议现在使用更高版本的Bootstrap

它会选择类名称在"span"某处包含字符串的所有元素。还有^=一个字符串的开头和一个字符串$=的结尾。这是一些CSS选择器的良好参考：http : //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

我只熟悉自举类spanX，其中X是一个整数，但如果有其它选择是结束在span，它也将属于这些规则。

它只是有助于应用通用CSS规则。