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

Question

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

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

有谁知道这种技术叫什么以及它的作用是什么？

原文由 jon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个属性通配符选择器。在您提供的示例中，它会在 .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>

很好的参考

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

原文由 isNaN1247 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

这是一个 CSS 选择器，它选择所有具有类 show-grid 的元素，这些元素有一个子元素，其类 包含 名称 span 。

原文由 Spikeh 发布，翻译遵循 CC BY-SA 4.0 许可协议