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)
css
css-selectors
SparrwHawk
quelle
quelle
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, ...
Antworten:
Nein, in diesem Fall möchten Sie eine durch Kommas getrennte Liste.
quelle
h1, h2, h3 {}
.Es ist kein einfaches CSS, aber wenn Sie WENIGER ( http://lesscss.org ) verwenden, können Sie dies mithilfe der Rekursion tun:
Mit Sass ( http://sass-lang.com ) können Sie dies verwalten, aber keine Rekursion zulassen. Sie haben
@for
Syntax für diese Instanzen: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.
quelle
"can" != "should"
. Trotzdem bieten die Sass / LESS-Optionen eine Erweiterbarkeit, die Vanilla CSS nicht bietet. Denken Sie an so etwasfont-size: (48px / @index)
.scss/sass
in ihrem Projekt, sondern wollen erzeugencss
mitscss/sass
ihr dieses Online - Tool namens verwenden kann sassmeisterWenn Sie SASS verwenden, können Sie auch dieses Mixin verwenden:
Verwenden Sie es so:
Bearbeiten: Meine persönliche Lieblingsmethode, indem ich optional einen Platzhalter-Selektor für jedes der Überschriftenelemente erweitere.
Dann kann ich auf alle Überschriften zielen, als würde ich auf eine einzelne Klasse abzielen, zum Beispiel:
quelle
!optional
Flagge auf der Erweiterung verstehe ? Und kann anscheinend nichts auf Google finden ...SCSS + Compass macht dies zu einem Kinderspiel, da es sich um Vorprozessoren handelt.
Hier erfahren Sie mehr über alle Compass-Hilfsselektoren :
quelle
Auswahlinterpolation des Stifts
quelle
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:
quelle
$('.my_div :header').css("color","red")
?Um dies mit Vanille-CSS anzugehen, suchen Sie nach Mustern in den Vorfahren der
h1..h6
Elemente: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..h6
Elemente durch Kombinieren der:first-child
und der:not
Pseudoklassen aus CSS3, die in allen modernen Browsern verfügbar sind, wie folgt gezielt werden :In Zukunft werden fortschrittliche Pseudoklassenselektoren wie
:has()
und nachfolgende Geschwisterkombinatoren (~
) noch mehr Kontrolle bieten, da sich die Webstandards im Laufe der Zeit weiterentwickeln.quelle
Sie können auch PostCSS und das Plugin für benutzerdefinierte Selektoren verwenden
Ausgabe:
quelle
Sie können alle Überschriften in Ihrem Dokument klassifizieren, wenn Sie sie mit einem einzigen Selektor wie folgt ausrichten möchten:
und in der CSS
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
quelle
Die neue
:is()
CSS-Pseudoklasse kann dies in einem Selektor tun:quelle