这个 CSS 选择器是什么?[类* =“跨度"] [英] What is this CSS selector? [class*="span"]

问题描述

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

I saw this selector in Twitter Bootstrap:

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

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

Does anyone know what this technique is called and what it does?

推荐答案

这是一个属性通配符选择器.在您提供的示例中，它会在 .show-grid 下查找具有包含 span 的类的任何子元素.

It's an attribute wildcard selector. In the sample you've given, it looks for any child element under .show-grid that has a class that CONTAINS span.

在本例中选择 <strong> 元素:

So would select the <strong> element in this example:

<div class="show-grid">
    <strong class="span6">Blah blah</strong>
</div>

您还可以搜索以...开头"

You can also do searches for 'begins with...'

div[class^="something"] { }

这将适用于这样的事情:-

which would work on something like this:-

<div class="something-else-class"></div>

并且'以...结尾'

div[class$="something"] { }

这将起作用

<div class="you-are-something"></div>

良好的参考

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

这篇关于这个 CSS 选择器是什么?[类* =“跨度"]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！