Ich möchte alle h-Tags auf einer Seite als Ziel festlegen. Ich weiß, dass du es so machen kannst ...

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

Aber gibt es eine effizientere Möglichkeit, dies mit erweiterten CSS-Selektoren zu tun? zB so etwas wie:

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

(aber offensichtlich funktioniert das nicht)

Nein, in diesem Fall möchten Sie eine durch Kommas getrennte Liste.

Es ist kein einfaches CSS, aber wenn Sie WENIGER ( http://lesscss.org ) verwenden, können Sie dies mithilfe der Rekursion tun:

.hClass (@index) when (@index > 0) {
    h@{index} {
        font: 32px/42px trajan-pro-1,trajan-pro-2;
    }
    .hClass(@index - 1);
}
.hClass(6);

Mit Sass ( http://sass-lang.com ) können Sie dies verwalten, aber keine Rekursion zulassen. Sie haben @forSyntax für diese Instanzen:

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

Wenn Sie keine dynamische Sprache verwenden, die mit CSS wie LESS oder Sass kompiliert werden kann, sollten Sie auf jeden Fall eine dieser Optionen ausprobieren. Sie können Ihre CSS-Entwicklung wirklich vereinfachen und dynamisieren.

Wenn Sie SASS verwenden, können Sie auch dieses Mixin verwenden:

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

Verwenden Sie es so:

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

Bearbeiten: Meine persönliche Lieblingsmethode, indem ich optional einen Platzhalter-Selektor für jedes der Überschriftenelemente erweitere.

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

Dann kann ich auf alle Überschriften zielen, als würde ich auf eine einzelne Klasse abzielen, zum Beispiel:

.element > %headings {
    color: red;
}

SCSS + Compass macht dies zu einem Kinderspiel, da es sich um Vorprozessoren handelt.

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

Hier erfahren Sie mehr über alle Compass-Hilfsselektoren :

Auswahlinterpolation des Stifts

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

Der jQuery-Selektor für alle h-Tags (h1, h2 usw.) lautet ": header". Wenn Sie beispielsweise mit jQuery alle h-Tags rot färben möchten, verwenden Sie:

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

Um dies mit Vanille-CSS anzugehen, suchen Sie nach Mustern in den Vorfahren der h1..h6Elemente:

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

Wenn Sie Muster erkennen können, können Sie möglicherweise einen Selektor schreiben, der auf das abzielt, was Sie möchten. In Anbetracht des obigen Beispiels können alle h1..h6Elemente durch Kombinieren der :first-childund der :notPseudoklassen aus CSS3, die in allen modernen Browsern verfügbar sind, wie folgt gezielt werden :

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

In Zukunft werden fortschrittliche Pseudoklassenselektoren wie :has()und nachfolgende Geschwisterkombinatoren ( ~) noch mehr Kontrolle bieten, da sich die Webstandards im Laufe der Zeit weiterentwickeln.

Sie können auch PostCSS und das Plugin für benutzerdefinierte Selektoren verwenden

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

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

Ausgabe:

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

Sie können alle Überschriften in Ihrem Dokument klassifizieren, wenn Sie sie mit einem einzigen Selektor wie folgt ausrichten möchten:

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

und in der CSS

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

Ich sage nicht, dass dies immer eine bewährte Methode ist, aber es kann nützlich sein und für die Ausrichtung der Syntax in vielerlei Hinsicht einfacher sein.

Wenn Sie also allen h1 bis h6 dieselbe HTML-Klasse im HTML zuweisen, können Sie sie für alle HTML-Dokumente ändern, die dieses CSS-Blatt verwenden.

Auf den Kopf gestellt, mehr globale Kontrolle im Vergleich zu "Abschnitt Div Artikel h1, etc {}",

Nachteil: Anstatt alle Selektoren im CSS aufzurufen, müssen Sie viel mehr HTML eingeben, aber ich finde, dass es von Vorteil sein kann, eine Klasse im HTML zu haben, die auf alle Überschriften abzielt. Achten Sie nur auf den Vorrang im HTML CSS, weil Konflikte entstehen können aus

Die neue :is()CSS-Pseudoklasse kann dies in einem Selektor tun:

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