как я могу объединить несколько классов с помощью css?

У меня есть эти классы bootstrap, и я хочу объединить каждый из них с li, есть ли лучший вариант, чем добавить li перед каждым классом? Я имею в виду, способ сгруппировать все классы bootstrap и объединить с 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 ли.col-sm-4 ли.col-md-4 ли.col-lg-4 но я предпочитаю делать вообще.

2 2
css css3 twitter-bootstrap twitter-bootstrap-3

2 ответа:

Я думаю, вы ищете что-то вроде этого. 

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 -->
2