Подстановочный шаблон для классов Bootstrap CSS

Я хочу настроить таргетинг на все столбцы внутри контейнера Bootstrap, чтобы я мог дать тогда подобный стиль. Например:

<div class="container unique">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

Я могу настроить таргетинг с помощью CSS:

.unique .col-md-3{...}

но то, что я хочу сделать, - это когда у меня много разных элементов col-*, чтобы нацелить их все вместе.

Я пробовал это:

.unique .col-*{...}

но это не сработало. Могу ли я сделать это с помощью CSS?

Ответ 1

Педро, то, что вы ищете, называется селектором атрибутов. В вашем конкретном случае вы можете использовать его так:

.unique [class~=col] {color:red }

но вы также можете использовать это с более широкими опциями, такими как

[class*='col-']

чтобы покрыть предыдущие пробелы.

Также здесь у вас есть такая же документация на испанском

Ответ 2

Для достижения этого можно использовать атрибут CSS, содержащий селектор:

.unique [class*=col]{...}

MDN - полезный справочный сайт для селекторов CSS. Для справки, селектора атрибутов найдены здесь.