Detaillierte Erläuterung der erweiterten CSS-Selektoren-HTML-Tutorial-php.cn

Detaillierte Erläuterung der erweiterten CSS-Selektoren

零下一度

Freigeben： 2017-07-26 18:00:23

Original

1774 Leute haben es durchsucht

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

Nach dem Login kopieren

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:

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><title>CSS 高级选择器使用</title><style>* {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;}</style></head><body><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li></ul></body></html>

Nach dem Login kopieren

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!