什么是这个CSSselect器?

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

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

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

这是一个属性通配符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器
 .show-grid [class*="span"] 

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

它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规则。