Chciałbym kierować reklamy na wszystkie tagi h na stronie. Wiem, że możesz to zrobić w ten sposób ...

h1,
h2,
h3,
h4,
h5,
h6 {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

ale czy istnieje skuteczniejszy sposób na zrobienie tego za pomocą zaawansowanych selektorów CSS? np. coś takiego:

[att^=h] {
  font: 32px/42px trajan-pro-1,trajan-pro-2;
}

(ale oczywiście to nie działa)

Nie, w tym przypadku potrzebujesz listy oddzielonej przecinkami.

To nie jest podstawowy css, ale jeśli używasz LESS ( http://lesscss.org ), możesz to zrobić za pomocą rekurencji:

.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 ) pozwoli ci to zarządzać, ale nie pozwoli na rekursję; mają @forskładnię dla tych instancji:

@for $index from 1 through 6 {
  h#{$index}{
    font: 32px/42px trajan-pro-1,trajan-pro-2;
  }
}

Jeśli nie używasz dynamicznego języka, który kompiluje się do CSS, takiego jak LESS lub Sass, zdecydowanie powinieneś sprawdzić jedną z tych opcji. Mogą naprawdę uprościć i zdynamizować rozwój CSS.

Jeśli używasz SASS, możesz również użyć tej mieszanki:

@mixin headings {
    h1, h2, h3,
    h4, h5, h6 {
        @content;
    }
}

Użyj go w ten sposób:

@include headings {
    font: 32px/42px trajan-pro-1, trajan-pro-2;
}

Edycja: Mój ulubiony sposób na zrobienie tego poprzez opcjonalne rozszerzenie selektora zastępczego na każdy z elementów nagłówka.

h1, h2, h3,
h4, h5, h6 {
    @extend %headings !optional;
}

Następnie mogę kierować reklamy na wszystkie nagłówki, tak jak w przypadku dowolnej pojedynczej klasy, na przykład:

.element > %headings {
    color: red;
}

SCSS + Compass sprawia, że ​​jest to bardzo proste, ponieważ mówimy o preprocesorach.

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

Możesz dowiedzieć się o wszystkich selektorach pomocniczych Compass tutaj :

Stylus jest interpolacja selektor

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

Selektor jQuery dla wszystkich znaczników h (h1, h2 itd.) To „: header”. Na przykład, jeśli chcesz, aby wszystkie znaczniki h miały kolor czerwony za pomocą jQuery, użyj:

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

Aby poradzić sobie z tym za pomocą waniliowego CSS, poszukaj wzorów u przodków h1..h6elementów:

<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>

Jeśli potrafisz dostrzec wzorce, możesz napisać selektor, który celuje w to, co chcesz. Biorąc pod uwagę powyższy przykład, wszystkie h1..h6elementy mogą być kierowane przez połączenie :first-childi :notpseudoklasy z CSS3, dostępne we wszystkich nowoczesnych przeglądarkach, na przykład:

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

W przyszłości zaawansowane selektory pseudoklas, takie jak :has()i kolejne kombinatory rodzeństwa ( ~), zapewnią jeszcze większą kontrolę, ponieważ standardy sieciowe będą ewoluować w czasie.

Możesz także użyć PostCSS i wtyczki niestandardowych selektorów

@custom-selector :--headings h1, h2, h3, h4, h5, h6;

article :--headings {
  margin-top: 0;
}

Wynik:

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  margin-top: 0;
}

Możesz .klasować wszystkie nagłówki w swoim dokumencie, jeśli chcesz kierować na nie jednym selektorem, w następujący sposób:

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

oraz w css

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

Nie twierdzę, że jest to zawsze najlepsza praktyka, ale może być przydatna, a do kierowania składni - na wiele sposobów łatwiejsza,

więc jeśli dasz wszystkim h1 do h6 tę samą klasę .heading w html, możesz je zmodyfikować dla dowolnych dokumentów html, które używają tego arkusza css.

plus, bardziej globalna kontrola w porównaniu z „sekcją div artykuł h1 itp. {}”,

minusem, zamiast wywoływać wszystkie selektory na miejscu w css, będziesz miał dużo więcej pisania w html, ale uważam, że posiadanie klasy w html do kierowania na wszystkie nagłówki może być korzystne, po prostu uważaj na pierwszeństwo w css, ponieważ konflikty mogą wynikać z

Nowa :is()pseudoklasa CSS może to zrobić w jednym selektorze:

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