[CSS/DIV] Analyse der Nutzung der vier wichtigsten CSS-Attributwertselektoren

Dieser Artikel wird es Ihnen beschreibenCSS-Eigenschaftswert-SelektorDas Format des Attributselektors ist Element, gefolgt von Klammern, mit Attributen in Klammern oder Attributausdrücken (ich weiß nicht, ob die Beschreibung korrekt ist, selbsterstellte Wörter), wie h1[Titel], h1[Titel="Logo"] usw., ich glaube, du wirst in diesem Artikel viel lernen.

CSS-Tutorial: CSS-Attributwert-Auswähler

CSS AttributeSelectors, vielleicht solltest du mit Attributselektoren nicht unvertraut sein, im Grunde sind id und Klassenselektoren tatsächlich Attributwert-Selektoren, wähle einfach die ID oder den Klassenwert.

Das Format des Attributselektors ist Element, gefolgt von Klammern, mit Attributen in Klammern oder Attributausdrücken (ich weiß nicht, ob die Beschreibung korrekt ist, selbsterstellte Wörter), wie h1[Titel], h1[Titel="Logo"], usw., du kannst 4 spezifische Formen in meiner untenstehenden Diskussion sehen.

1. Einfacher CSS-Attributwert-Selektor

Unabhängig vom Namen ist dies das Merkmal des einfachen Attributselektors.

h1[klasse]{color:silver; wirkt auf jedes H1-Element mit Klasse, unabhängig vom Wert der Klasse. Daher<h1class="hoopla">Hallo</h1>, <h1class="severe">Serenity</h1>, <h1class="fancy"> h1 von Fooling</h1> wird von dieser Regel beeinflusst.

Natürlich ist diese "Eigenschaft" nicht nur eine Klasse oder ein Id, sondern kann alle legitimen Eigenschaften des Elements sein, wie zum Beispiel img's alt, wie img[alt]{cssdeclarationshere; gilt für jedes IMG-Element mit dem ALT-Attribut. Dann a[href][title]{font-weight:bold; Was ist mit }? Wie du weißt, funktioniert das bei Elementen mit sowohl href- als auch Titelattributen, wie <atitle="W3CHome">W3C</a>.

2. Präziser CSS-Attributwert-Selektor

id und klasse sind im Wesentlichen exakte Attributwert-Selektoren, ja, h1#logo ist gleich h1[id="logo"]. Wie bereits erwähnt, beschränken wir uns nicht auf ID oder Klasse, wir können jede Immobilie nutzen! Zum Beispiel a[][title="W3CHome"]{font-size:200%; } wird auf <atitle="W3CHome">W3C angewendet</a>.

3. Einige CSS-Attributwertselektoren

Wie der Name schon sagt, wirkt der Attributwert teilweise (in diesem Fall der Teil, der tatsächlich dem gesamten Wort entspricht), auf das Element ein. Schauen wir uns ein Beispiel an:

Jede dieser Varianten kann die Schriftart des p fett machen.

Dieser Selektor ist zum Beispiel sehr nützlich, wenn Sie eine Illustration mit der Zeichenkette "Figure" im Titel stylen möchten, z. B. title="Figure5:xxx description", können Sie img[title~="Figure"] verwenden.

Es sollte beachtet werden, dass, wie ich im ersten Satz betont habe, man das ganze Wort übereinstimmen muss und img[title~="Figure"] nicht mit title="Figure5:xxx description" übereinstimmt.

Außerdem habe ich einen kleinen Test gemacht: Man ändert im Beispiel "Figur" zu "Illustration" und img[title~="Figure"] zu img[title~="Illustration"], und es stimmt trotzdem in Firefox überein, egal ob die Codierung GB2312 oder UTF-8 ist. Es scheint, dass die CSS-Unterstützung für Chinesen nicht schlecht ist.

4. Spezieller CSS-Attributwert-Selektor

Irgendwie seltsam, dieser Selektor. Es funktioniert so: Nun, es ist einfacher, ein Beispiel zu geben, als es zu beschreiben.

*[lang|="en"]{color:white; Diese Regel wählt den Wert des Attributs lang oder des Elements, das mit en- beginnt. Das heißt, sie kann <h1lang="en">Hallo!</h1>, <plang="en-us">Grüße!</p>und <divlang="en-au">Guten Tag!</div>und stimmt nicht überein<plang="fr">Bonjour!</p>und <h3lang="cy-en">Jrooana!</h3>.