Я хотів би націлити всі 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, але якщо ви використовуєте менше ( 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та :notпсевдокласи з CSS3, доступні у всіх сучасних браузерах, наприклад:

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

Ви можете .класифікувати всі заголовки у вашому документі, якщо ви хочете націлити їх на один селектор, як описано нижче,

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

і в css

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

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

тож якщо ви даєте всім від h1 до h6 того самого класу .headhead у html, ви можете змінити їх для будь-яких HTML-документів, які використовують цей css аркуш.

перевернутий, більш глобальний контроль порівняно з "статтею розділ h1 та ін. {}",

Знизу, замість того, щоб закликати всіх селекторів на місце у css, у вас буде набагато більше вводити html, але я вважаю, що мати клас у html для націлювання на всі заголовки може бути корисним, просто будьте уважні до переваги в css, тому що можуть виникнути конфлікти

Новий :is()псевдоклас CSS може зробити це в одному селекторі:

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