什么是这个CSSselect器？

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

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

有谁知道这种技术被称为什么？

Answer 1

这是一个属性通配符select器。 在你给出的示例中，它会在.show-grid下.show-grid具有CONTAINS类的类的任何子元素。

所以在这个例子中select<strong>元素：

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

您也可以search“开始于…”

 div[class^="something"] { } 

这将工作在这样的事情：

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

和“以……结尾”

 div[class$="something"] { } 

这将工作

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

很好的参考

• CSS3属性select器：子串匹配
• 你必须记住30个CSSselect器
• W3C CSS3select器

Answer 2

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

这是一个CSSselect器，它select具有show-grid类的所有元素，该元素具有包含名称跨度的子元素。

Answer 3

它select类名称包含string"span"所有元素。 还有^=表示string的开头， $=表示string的结尾。 以下是一些CSSselect器的参考： http : //net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

我只熟悉引导类spanX ，其中X是一个整数，但是如果有其他select符以 span 结束 ，它也将落入这些规则之下。

这只是帮助应用一揽子CSS规则。