什么是这个CSS选择器？ [class * =" span"] [英] 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 下找到具有CONTAINS 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"] { }

b $ b

这将工作在这样的东西： -

which would work on something like this:-

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

和'ends with ...'

and 'ends with...'

div[class$="something"] { }

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

良好参考

Good references

• CSS3属性选择器：子字符串匹配


• 30 CSS您必须记住的选择器


• W3C CSS3选择器

• CSS3 Attribute Selectors: Substring Matching
• The 30 CSS Selectors you Must Memorize
• W3C CSS3 Selectors

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