什么是这个CSS选择器？[类*= "跨度"]

Question

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

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

有谁知道这种技术被称为什么以及它做什么？

Answer 1

它是一个属性通配符选择器.在您给出的示例中,它查找其下.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选择器

Answer 2

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

它是一个CSS选择器,它使用类show-grid选择所有元素,该类具有一个子元素,其子类包含名称span.

Answer 3

下列：

.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>本身之外，所有元素都被击中。

关于 Bootstrap：

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