Можно ли настроить таргетинг на все теги <H>с помощью одного селектора?

Question

Я хочу настроить таргетинг на все теги 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;
}

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

Answer 1

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

Answer 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 более динамичной.

Answer 3

Если вы используете 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;
}

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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

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

Answer 7

Вы можете .классифицировать все заголовки в вашем документе, если вы хотите настроить таргетинг на них одним селектором, как указано ниже,

<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, поскольку конфликты могут возникать из

Answer 8

Чтобы решить эту проблему с помощью ванильного 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() и последующие одноуровневые комбинаторы (~), обеспечат еще больший контроль по мере развития веб-стандартов со временем.

Answer 9

Да, вы можете использовать подстановочный знак.

Пример:

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

Это сбросит все поля и отступы до 0.

Answer 10

Вы также можете использовать 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;
}