Я хотел бы настроить таргетинг на все элементы h1..h6
на странице. Я знаю, что вы можете сделать это таким образом...
h1, h2, h3, h4, h5, h6 {
font-size: 1.2em;
}
Можно ли это сделать с помощью CSS3 или CSS4? Например:
[att^=h] {
font-size: 1.2em;
}
Если это невозможно с CSS3 или 4, каковы некоторые творческие альтернативы?
Нет, список разделенных запятыми - это то, что вы хотите в этом случае.
Это не базовый 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.
"can" != "should"
. Несмотря на это, параметры Sass / LESS дают вам возможность расширяться, а ванильный CSS - нет. Подумайте о чем-то вроде font-size: (48px / @index)
.
Если вы используете 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;
}
!optional
флага! И не могу найти что-нибудь на Google ...
SCSS + Compass делает это быстро, поскольку мы говорим о предварительных процессорах.
#{headings(1,5)} {
//definitions
}
Здесь вы можете узнать обо всех вспомогательных селекторах Compass:
for n in 1..6
h{n}
font: 32px/42px trajan-pro-1,trajan-pro-2;
Чтобы решить эту проблему с помощью ванильного 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()
и последователей следующего поколения (~
), обеспечит еще больший контроль, поскольку веб-стандарты продолжают развиваться с течением времени.
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...