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

93

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

h1, h2, h3, h4, h5, h6 {
  font-size: 1.2em;
}

Можно ли это сделать с помощью CSS3 или CSS4? Например:

[att^=h] {
  font-size: 1.2em;
}

Если это невозможно с CSS3 или 4, каковы некоторые творческие альтернативы?

  • 6
    Это становится все более утомительным при выборе h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Теги:
dom
css-selectors

6 ответов

69
Лучший ответ

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

34

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

  • 3
    я почти уверен, что печатать вручную, чем создавать цикл for в CSS, как h1, h2, h3 ... занимает меньше времени, места ... более понятно для понимания сейчас и позже.
  • 0
    ¯_ (ツ) _ / ¯ "can" != "should" . Несмотря на это, параметры Sass / LESS дают вам возможность расширяться, а ванильный CSS - нет. Подумайте о чем-то вроде font-size: (48px / @index) .
Показать ещё 1 комментарий
25

Если вы используете 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;
}
  • 0
    Это очень маленький шаг от SCSS до SCSS + Compass: compass-style.org/reference/compass/helpers/selectors - заголовки ($ from, $ to)
  • 0
    Ух, наткнулся на это два года спустя .. и редакция выглядит золотой! Я уверен, что я понимаю цель !optional флага! И не могу найти что-нибудь на Google ...
5

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

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

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

4

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню