Detaillierte Erläuterung der erweiterten CSS-Selektoren

CSS ist eines der leistungsstärksten Tools, die Webdesignern zur Verfügung stehen. Damit können wir die Benutzeroberfläche einer Website in wenigen Minuten ändern, ohne die Seiten-Tags zu ändern. Aber trotz der Tatsache, dass jeder von uns erkennt, dass es nützlich ist, schöpfen CSS-Selektoren bei weitem nicht ihr Potenzial aus und manchmal neigen wir dazu, übermäßig viele und nutzlose Klassen, IDs, Divs, Spans usw. zu verwenden. Unser HTML ist sehr chaotisch.

Der beste Weg, die Verbreitung dieser „Plagen“ in Ihren Tags zu verhindern und sie sauber und semantisch zu halten, besteht darin, komplexere CSS-Selektoren zu verwenden, die auf bestimmte Elemente abzielen können, ohne zusätzliche Klasse oder ID zu verwenden, und auf diese Weise können wir kann auch unseren Code und Stil flexibler machen.

CSS-Priorität

Bevor wir uns mit den erweiterten CSS-Selektoren befassen, ist es wichtig zu verstehen, wie CSS-Prioritäten funktionieren, damit wir wissen, wie wir unsere Selektoren richtig verwenden und nicht viel Zeit verschwenden Debuggen einiger Probleme, die leicht gelöst werden können, wenn wir auf Prioritäten achten

Wenn wir CSS schreiben, müssen wir auf die Kaskade einiger Selektoren achten. Der Selektor, den wir am Ende schreiben, muss nicht unbedingt höher sein überschreiben Sie die Stile, die wir zuvor für dasselbe Element geschrieben haben.

Wie berechnet man also die Priorität eines bestimmten Selektors? Es ist ziemlich einfach, wenn man bedenkt, dass Prioritäten als vier durch Kommas getrennte Zahlen ausgedrückt werden, wie zum Beispiel: 1, 1, 1, 1 oder 0, 2, 0, 1

Die erste Zahl (a) ist normalerweise 0, es sei denn Das Stilattribut wird für das Tag verwendet.

Die zweite Zahl (b) ist die Summe der Anzahl der IDs im Selektor.

Die dritte Zahl (c) ist die Summe der anderen Attributselektoren und Pseudoklassen, die für diesen Selektor verwendet werden. Dazu gehören Klassen- (.example) und Attributselektoren (wie li[id=red]);

Die vierte Zahl (d) zählt Elemente (wie table, p, div usw.) und Pseudoelemente (Wie: erste Zeile usw.);

Der universelle Selektor (*) hat die Priorität 0.

Wenn zwei Selektoren die gleiche Priorität haben, funktioniert der letztere im Stylesheet.

Schauen wir uns ein paar Beispiele an, damit es leichter zu verstehen ist:

#sidebar h2 – 0, 1, 0, 1

h2.title – 0, 0 , 1, 1

h2 + p — 0, 0, 0, 2

#sidebar p:first-line — 0, 1, 0, 2

unten In Im Beispiel wird das erste funktionieren, weil es eine höhere Priorität hat als das zweite:

#sidebar p#first { color: red; } — 0, 2, 0, 1
#sidebar p:first-line { color: blue; } — 0, 1, 0, 2

Es ist wichtig, zumindest ein grundlegendes Verständnis dafür zu haben, wie Prioritäten funktionieren, aber einige Tools wie Firebug, wenn wir Um ein bestimmtes Element zu untersuchen, ist es sinnvoll, alle CSS-Selektoren in der Reihenfolge ihrer Selektorpriorität aufzulisten, um uns mitzuteilen, welcher Selektor für ein bestimmtes Element gültig ist.

Die folgenden Beispiele erläutern hauptsächlich die Verwendung von nth-child, first-child, last-child, nth-of-type, first-of-type und last-of-type.

Beispielcode:

76c82f278ac045591c9159d381de2c57f2fff6a208c3e290698f287c1c0e7a5393f0f5c25f18dab9d176bd4f6de5d30e03fc48c6e8e131d94ca98b8e034341f4b2386ffb911b14667cb8f0f91ea547a7CSS 高级选择器使用6e916e0f7d1e588d4f442bf645aedb2fc9ccee2e6ea535a969eb3f532ad9fe89* {padding: 0;margin: 0;}/*IE8不支持 IE9支持*/
            li:nth-child(3n+1) {color: red;}/*IE7+以上浏览器均支持*/
            li:first-child {color: blue;}/*IE8不支持 IE9以上支持*/
            li:last-child {color: green;}/*IE8不支持 IE9以上支持*/
            li:nth-of-type(odd) {color: #8D8D8D;}/*IE8不支持 IE9以上支持*/
            li:first-of-type {color: #92B8B1;}/*IE8不支持 IE9以上支持*/
            li:last-of-type {color: #2E2D3C;}531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6Item 1bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 2bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 3bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 4bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 5bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6Item 7bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

Zusammenfassung:

Außer dass der First-Child-Selektor mit IE7+ und höher kompatibel ist, alle anderen Selektoren sind. Zur Kompatibilität ist der Browser IE9 oder höher erforderlich .

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der erweiterten CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!