Angenommen, Sie erstellen in CSS 3 eine HTML-Datei mit der folgenden Tag-Struktur:
<div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>
Dann in der CSS-Datei
div[id^="nav"] {Hintergrund:#ff0;
Beachten Sie das „ ^ “
CSS steuert in diesem Fall [u]div#nav-primary und div#nav-secondary[/u]. Bitte beachten Sie, dass diesen beiden Bezeichnungen ein vorangestellt ist nav , es ist unklar, ob es durch „-“ getrennt ist oder ob die ID von vorne nach hinten übereinstimmt [sweat]
div[id$="primary"] {Hintergrund:#ff0;
Beachten Sie, dass es sich um „ $ “ handelt.
CSS steuert in diesem Fall [u]div#nav-primary und div#content-primary[/u]. Bitte beachten Sie, dass nach diesen beiden Tags ein Primar steht. Es ist unklar, ob „-“ als Trennung verwendet wird oder ob die ID von hinten nach vorne abgeglichen wird.
div[id*="content"] {Hintergrund:#ff0;
Beachten Sie, dass es sich um „ * “ handelt.
CSS steuert in diesem Fall [u]div#content-primary, div#content-secondary und div#tertiary-content[/u]. Bitte beachten Sie, dass diese Tags alle Inhalte enthalten. Es ist nicht klar, ob sie durch „-“ getrennt sind oder ob die ID automatisch gescannt und abgeglichen wird.
Es scheint, dass der Autor gesagt hat, dass diese Tags jetzt von den neuesten Versionen verschiedener Browser außer IE unterstützt werden. Sie können es versuchen, aber ich werde es nicht versuchen ~ [lol]
div#content-primary:target { Gliederung:1px solid #300 }
Beachten Sie, dass „ :target “
In diesem Fall steuert CSS den Ankerlink http://www.example.com/index.html #content-primary (der Ankerlink kann als Link innerhalb einer Webseite verstanden werden, verglichen mit der Rückkehr , die auf manchen Webseiten zu sehen ist Seiten) oben )
Der Autor sagt, dass die Browser Mozilla und Safari dies mittlerweile unterstützen
input[type="text"]:enabled {Hintergrund:#ffc;
input[type="text"]:disabled { Hintergrund:#ddd }
Beachten Sie, dass „ [type="text"]:enabled „
Dies ist das CSS, das das Formular steuert. „[u][type="text"][/u]“ scheint zu bedeuten, dass der Typ im Formular Text ist. . . Was wird [u]type="password"[/u] sein?
input:checked { border:1px solid #090 }
Beachten Sie, dass „ :checked “
Dies ist das CSS, das die „Auswahl“ des Formulars steuert. . .
Der Autor sagt, dass Opera- und Mozilla-Browser diese jetzt unterstützen
:root { Hintergrund:#ff0;
html {Hintergrund:#ff0;
Bitte achten Sie darauf, dass „ :root “
Dieses „:root“ ist ein Tag höherer Ebene als HTML. Sie können diesen Artikel von Chidori Ichiba lesen, um HTML und Body richtig zu verstehen. Er hat in dem Artikel festgestellt, dass es einen Frame außerhalb von HTML gibt, hehe
Der Autor sagt, dass die Browser Mozilla und Safari dies mittlerweile unterstützen
Das nächste : nth-child() ist interessanter, haha~ Sie können Zahlen und Standardbuchstaben in die Klammern setzen~
p:nth-child(3) { color:#f00;
Dies scheint zu bedeuten, dass basierend auf dem zuerst erscheinenden P alle Ps, die ein Vielfaches von „3“ sind, kontrolliert werden
p:nth-child(odd) { color:#f00;
Dies scheint zu bedeuten, dass basierend auf dem ersten P, das erscheint, alle ungeraden Zahlen von P kontrolliert werden
p:nth-child(even) { color:#f00;
Dies scheint zu bedeuten, dass basierend auf dem ersten P, das erscheint, alle Ps in gerader Anzahl kontrolliert werden
p:nth-child(3n+0) { color:#f00;
p:nth-child(3n) { color:#f00;
Diese beiden Tags sind gleichwertig, da die 0 nach dem ersten keine Auswirkung hat. Das bedeutet, dass P, das dreimal so groß ist wie das erste P, das erscheint, kontrolliert wird~ (Was für eine Wendung, HOHO~ [rolleyes]) Mit anderen Worten , dieses „n“ nimmt einen Wert von 0.1.2.3.4.5.6.... an. Es werden so viele P gesteuert, wie Sie berechnen können. . .
tr:nth-child(2n+11) { Hintergrund:#ff0;
Wenn Sie das oben Gesagte verstehen, ist das nicht schwer zu verstehen, aber die Bezeichnung, die er kontrolliert, hat sich in „tr“ geändert. Das bedeutet, dass die Tabelle abwechslungsreicher wird. Ich bin der Meinung, dass jeder in der Grundschule gut im Rechnen sein muss und nicht lernen muss Nun ja, geh schnell nach Hause und lerne noch einmal etwas Grundrechenarten. . . (Erhöht eine solche Bezeichnung jedoch die Effizienz der Computerverarbeitung? [verwirrt] Ich hoffe, meine Frustration ist unnötig ...)
p:last-child {Hintergrund:#ff0;
Ein p vor p wird kontrolliert (NND, p kommt und geht, trifft pp [Schweiß])
:not(p) { border:1px solid #ccc }
Dieses p ist nicht kontrolliert. Das bedeutet, dass es seinen eigenen Stil verwendet. Es sollte zusammen mit den vorherigen verwendet werden. . .
p ~ ul { Hintergrund:#ff0;
ul wird mit Priorität vor p angezeigt. Ich weiß nicht, um welche Prioritätsmethode es sich handelt. . .
Im Grunde ist das alles, was ich verstehen kann. Sie können die folgenden beiden Websites besuchen, um weiterzulernen. Wenn ich etwas Falsches gesagt habe, sagen Sie es mir bitte.
www.456bereastreet.com/archive/200601/css_3_selectors_explained/
www.w3.org/TR/2005/WD-css3-selectors-20051215/