如何用 CSS 连接多个类？答案

【问题标题】：how can i concatenate multiple classes with css?如何用 CSS 连接多个类？
【发布时间】：2015-10-21 11:20:27
【问题描述】：

我有这些引导类，我想将每个类与 li 连接，有没有比在每个类之前添加 li 更好的选择？我的意思是，一种将所有引导类分组并与 li 连接的方法。

.col-xs-1、.col-sm-1、.col-md-1、.col-lg-1、.col-xs-2、.col-sm-2、.col-md- 2、.col-lg-2、.col-xs-3、.col-sm-3、.col-md-3、.col-lg-3、.col-xs-4、.col-sm-4 , .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6、.col-md-6、.col-lg-6、.col-xs-7、.col-sm-7、.col-md-7、.col-lg-7、. col-xs-8、.col-sm-8、.col-md-8、.col-lg-8、.col-xs-9、.col-sm-9、.col-md-9、.col -lg-9、.col-xs-10、.col-sm-10、.col-md-10、.col-lg-10、.col-xs-11、.col-sm-11、.col- md-11、.col-lg-11、.col-xs-12、.col-sm-12、.col-md-12、.col-lg-12

就我而言，我只想要这四个：李.col-xs-4 li .col-sm-4 li .col-md-4 李.col-lg-4 但我更喜欢一般。

【问题讨论】：

标签： twitter-bootstrap css class twitter-bootstrap-3

【解决方案1】：

我认为您正在寻找类似的东西。

li[class*='col-'], li[class^='col-'] {
  ...
}

请记住不要在li 和[class*='col-'] 之间包含空格。上面两个选择器的组合是为了防止像foo-col-1这样的类被选中。

【讨论】：

【解决方案2】：

您必须使用 CSS 选择器：

'以..开头'

li[class^="col-"] { }

这将适用于这样的事情：

<li class="col-md-4"></li>  
<!-- only if the very first string in your class matches "col-" -->
<!-- so, class=" test something-else" won't work

或

'包含..'

li[class*="col-"] { }

这将起作用

<li class="col-md-4 col-sm-4 col-xs-4"></li> 
<!-- "col-" can be anywhere and as many times as needed -->

【讨论】：