it-roy-ru.com

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

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

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

119
SparrwHawk

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

94
Dave Markle

Это не базовый 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 более динамичной.

40
Steve

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

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

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

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

5
Imperative

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

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

Чтобы решить эту проблему с помощью Vanilla 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 могут быть нацелены путем объединения псевдоклассов /3 :first-child и :not CSS3, доступных во всех современных браузерах, например:

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

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

1
Josh Habdas

Вы можете .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, потому что конфликты могут возникнуть из 

1
DennisWPaulsenJR

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

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

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

0
Fabian Madurai