Я хочу настроить таргетинг на все теги h на странице. Я знаю, ты можешь сделать это таким образом ...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

но есть ли более эффективный способ сделать это с помощью расширенных селекторов CSS? например что-то вроде:

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

(но, очевидно, это не работает)

Нет, в этом случае вам нужен список через запятую.

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

.hClass (@index) when (@index > 0) {
    h@{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 более динамичной.

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

@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;
}

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

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

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

Стилус «ы селектор интерполяции

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

Селектором jQuery для всех тегов h (h1, h2 и т. Д.) Является «: header». Например, если вы хотите сделать все теги h красного цвета с помощью jQuery, используйте:

$(':header').css("color","red")

Чтобы справиться с этим с помощью ванильного 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и :notCSS3, доступных во всех современных браузерах, например:

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

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

Вы также можете использовать PostCSS и плагин пользовательских селекторов

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

Вывод:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

Вы можете .class все заголовки в вашем документе, если вы хотите нацелить их с помощью одного селектора, следующим образом:

<h1 class="heading">...heading text...</h1>
<h2 class="heading">...heading text...</h2>

и в css

.heading{
    color: #Dad;
    background-color: #DadDad;
}

Я не говорю, что это всегда лучшая практика, но она может быть полезной, а для ориентации на синтаксис - проще во многих отношениях,

так что если вы предоставите всем h1-h6 один и тот же класс .heading в html, то вы можете изменить их для любых документов html, которые используют этот лист css.

верх, более глобальный контроль по сравнению с "разделом статьи h1 и т. д.}",

С другой стороны, вместо того, чтобы вызывать все селекторы на месте в css, у вас будет намного больше возможностей ввода html, но я считаю, что наличие класса в html для нацеливания на все заголовки может быть полезным, просто следите за приоритетом в CSS, потому что конфликты могут возникнуть из

Новый :is()псевдокласс CSS может сделать это в одном селекторе:

:is(h1, h2, h3, h4, h5, h6) {
  color: red;
}