Ответ 1

Нет, список разделенных запятыми - это то, что вы хотите в этом случае.

Ответ 2

Это не базовый css, но если вы используете LESS (http://lesscss.org), вы можете сделать это с помощью рекурсии:

.hClass (@index) when (@index > 0) {
    [email protected]{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Sass (http://sass-lang.com) позволит вам управлять этим, но не разрешит рекурсию; они имеют синтаксис @for для этих экземпляров:

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

Если вы не используете динамический язык, который компилируется в CSS как LESS или Sass, вам обязательно нужно проверить один из этих параметров. Они могут действительно упростить и сделать более динамичным развитие CSS.

Ответ 3

Если вы используете SASS, вы также можете использовать этот mixin:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

Используйте его так:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

Изменить: Мой личный любимый способ сделать это, необязательно расширив селектор закладок на каждом из элементов заголовка.

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

Затем я могу настроить таргетинг на все заголовки, как если бы я настроил таргетинг на любой отдельный класс, например:

.element > %headings {
    color: red;
}

Ответ 4

SCSS + Compass делает это быстро, поскольку мы говорим о предварительных процессорах.

#{headings(1,5)} {
    //definitions
  }

Здесь вы можете узнать обо всех вспомогательных селекторах Compass:

Ответ 5

Stylus селекторная интерполяция

for n in 1..6
  h{n}
    font: 32px/42px trajan-pro-1,trajan-pro-2;

Ответ 6

Чтобы решить эту проблему с помощью ванильного CSS, найдите шаблоны в предках элементов h1..h6:

<section class="row">
  <header>
    <h1>AMD RX Series</h1>
    <small>These come in different brands and types</small>
  </header>
</header>

<div class="row">
  <h3>Sapphire RX460 OC 2/4GB</h3>
  <small>Available in 2GB and 4GB models</small>
</div>

Если вы можете определить шаблоны, вы можете написать селектор, который нацелен на то, что вы хотите. Учитывая приведенный выше пример, все элементы h1..h6 могут быть нацелены путем объединения :first-child и :not псевдоклассы из CSS3, доступные во всех современных браузерах, например:

.row :first-child:not(header) { /* ... */ }

В будущих расширенных селекторах псевдокласса типа :has() и последователей следующего поколения (~), обеспечит еще больший контроль, поскольку веб-стандарты продолжают развиваться с течением времени.