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>

好的参考资料

Answer 2

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

这是一个CSS选择器，用于选择类 show-grid 的所有元素，其中包含类包含名称的子元素 span

Answer 3

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

我只熟悉引导类spanX，其中X是一个整数，但是如果在span中有结束的其他选择器，它也会属于这些规则。

这有助于应用一揽子CSS规则。

Answer 4

以下内容：

<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>

表示＆＃39; .show-grid＆＃39;的所有子元素。用一个包含单词＆＃39; span＆＃39;它会获得那些CSS属性。

<span>

除了span6之外，所有元素都会被击中。

关于Bootstrap：

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

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

4 个答案: