Das Folgende wird aus dem Buch "HTML5 & CSS3 für die Real World, 2. Edition" von Alexis Goldstein, Louis Lazaris und Estelle Weyl ausgehoben. Dieses Buch ist in Gesch?ften auf der ganzen Welt erh?ltlich und Sie k?nnen die E-Book-Version hier auch kaufen.

Kernpunkte

• Der CSS3 -Selektor erm?glicht eine pr?zise Positionierung von Elementen auf einer Webseite, wodurch die Funktionen früherer CSS -Versionen erweitert werden. Relationale Selektoren und Attribut -Selektoren sind Schlüsselmerkmale von CSS3.
• Beziehungsauswahl lokalisiert Elemente basierend auf ihren Beziehungen im Tag. Dazu geh?ren Nachkommenskombinationen (E F), Subcombinator (E & GT; F), benachbarte Geschwisterauswahler oder n?chste Geschwisterauswahl (E F) sowie universelle Geschwisterauswahl oder nachfolgende Geschwisterauswahl (E ~ f).
• Der Attribut -Selektor in CSS3 erm?glicht das übereinstimmung basierend auf den Attributen des Elements, und CSS3 erweitert den Attributauswuchs von CSS2, indem er eine Musteranpassung erm?glicht. Dazu geh?ren E [attr], e [attr = val], e [attr | = val], e [attr ~ = val], e [attr^= val], e [attr $ = val] und e [attr * = val].
• Alle modernen Browser unterstützen CSS3 -Selektoren, einschlie?lich IE9 und sp?ter. Die Verwendung dieser Selektoren kann die Effizienz und Effektivit?t von Webdesign und -entwicklung erheblich verbessern.

CSS3 Selector

CSS -Selektor ist der Kern von CSS. Wenn es keinen Selektor gibt, um Elemente auf der Seite zu finden, besteht die einzige M?glichkeit, das CSS -Attribut des Elements zu ?ndern, das Style -Attribut des Elements zu verwenden und den Stilinline zu deklarieren, der sowohl ungeschickt als auch schwer zu warten ist. Also verwenden wir Selector. Zun?chst erm?glicht CSS übereinstimmende Elemente nach Typ, Klasse und/oder ID. Dadurch müssen unsere Tags Klassen- und ID -Attribute hinzufügen, um Haken zu erstellen und Elemente desselben Typs zu unterscheiden. CSS2.1 fügt Pseudo-Elemente, Pseudoklassen und Kombinatoren hinzu. Mit CSS3 k?nnen wir verschiedene Selektoren verwenden, um nahezu jedes Element auf der Seite zu finden.

In der folgenden Beschreibung werden wir Selektoren in früheren CSS -Versionen enthalten. Sie sind enthalten, da wir zwar CSS3 -Selektoren verwenden k?nnen, die Selektoren früher als CSS3 auch Teil der CSS -Selektorstufe 3 -Spezifikation sind und weiterhin unterstützt werden, da die CSS -Selektorstufe 3 sie erweitert. Selbst für Selektoren, die es schon seit einiger Zeit gibt, lohnt es sich, hier zu überprüfen, da in der alten Spezifikation einige wenig bekannte verborgene Edelsteine ??enthalten sind. Bitte beachten Sie, dass alle modernen Browser, einschlie?lich IE9 und sp?ter, alle CSS3 -Selektoren unterstützen.

Beziehungsauswahl

Beziehungsauswahl lokalisiert Elemente basierend auf ihren Beziehungen im Tag. All dies wird beginnend mit IE7 und in allen anderen gro?en Browsern unterstützt:

Nachkommennombinator (e f)

Sie sollten damit definitiv vertraut sein. Der Nachkomme-Selektor lokalisiert jedes Element F, das Nachkommen von Element E (Kinderelemente, Enkelkindelemente, Urenkel Elemente usw.) ist. Zum Beispiel lokalisiert OL Li Li -Elemente, die sich in einer geordneten Liste befinden. Dies schlie?t das LI -Element ein, das in UL in OL verschachtelt ist, was m?glicherweise nicht das ist, was Sie wollen.

subcombinator (e & gt; f)

Dieser Selektor entspricht jedem Element F als direktes untergeordnetes Element von Element E - Jegliche weitere verschachtelte Elemente werden ignoriert. Wenn Sie mit dem obigen Beispiel fortfahren, finden Sie nur die Li -Elemente, die direkt in OL sind und die in UL verschachtelten Elemente ignorieren.

Nachbarbruder -Selektor oder Next Brother Selector (e f)

Dies entspricht jedem Element F, das das gleiche übergeordnete Element wie E teilt und im Tag direkt hinter liegt. Zum Beispiel wird Li Li alle LI -Elemente in einem bestimmten Beh?lter auffinden, mit Ausnahme des ersten Li -Elements.

Universal Brother Selector oder nachfolgende Bruderauswahl (e ~ f)

Das ist etwas schwierig. Es entspricht jedem Element F, das das gleiche übergeordnete Element wie jedes E teilt und im Tag dahinter steht. Daher stimmt H1 ~ H2 zu jedem H2 überein, das nach H1 liegt, solange sie alle das gleiche direkte übergeordnete Element haben - dh, solange H2 in keinem anderen Element verschachtelt ist.

Schauen wir uns ein einfaches Beispiel an:

<header>
  <h1>Main title</h1>
  <h2>This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2>This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

Die Selektorstrings H1 ~ H2 stimmen mit dem ersten H2 überein, da H1 und H2 beide Kinder des Headers oder direkten Nachkommen sind. Das n?chste H2, den Sie im Code -Snippet sehen, stimmt nicht überein, da sein übergeordnetes Element ein Artikel ist, kein Header. Es entspricht jedoch dem Header ~ H2. In ?hnlicher Weise entspricht H2 ~ P nur mit dem letzten Absatz, da der erste Absatz vor H2 ist, das er mit dem übergeordneten Elementartikel teilt.

Hinweis: Warum gibt es keinen "Eltern" -S?hler?

Sie werden feststellen, dass bisher keine "Vater" oder "Vorfahren" Selektoren, noch "Vorbruder" -Sektoren vorhanden sind. Die Leistung des Browsers, den Dom -Baum rückw?rts durchqueren oder rekursiv zu einem verschachtelten Element durchqueren müssen, bevor er entscheidet, ob der Stil angewendet werden soll, wodurch die F?higkeit verhindert wird, dass eine native "den Dombaum nach oben nach oben ist".

jQuery enth?lt: Has () als Vorfahr -Selektor. Dieser Selektor wird für die CSS -Selektorstufe 4 in Betracht gezogen, wurde jedoch in keinem Browser implementiert. Wenn und wenn es implementiert ist, k?nnen wir E: (f) mit F als Nachkommen verwenden, E: Has (& gt; f) mit F als direktes untergeordnetes Element zu finden, E: Has (f ) direkt vor Bruder F und ?hnlich zu finden.

Durchsuchen Sie die Stilbl?tter des HTML5 Herald und Sie werden sehen, dass wir diese Selektoren an vielen Stellen verwenden. Wenn Sie beispielsweise das Gesamtlayout der Stelle bestimmen, m?chten wir, dass die Divs der drei Spalten nach links schweben. Um diesen Stil auf eine andere darin verschachtelte DIV anzuwenden, verwenden wir einen Unterw?hlen:

main > div {
  float: left;
  overflow: hidden;
}

Wenn wir in den n?chsten Kapiteln neue Stile zur Website hinzufügen, werden Sie viele dieser Auswahltypen sehen.

Attributauswahl

CSS2 führt mehrere Eigenschaftsauswahlern vor. Diese erm?glichen das Matching basierend auf den Attributen des Elements. CSS3 erweitert diese Eigenschaftsauswahlern, um eine gewisse Positionierung basierend auf der Musteranpassung zu erm?glichen. CSS Selector Level 4 hat einige weitere hinzugefügt:

e [attr] entspricht jedem Element E mit dem Attributat, unabh?ngig vom Wert des Attributs. Wir haben es in Kapitel 4 verwendet, um die erforderlichen Eingaben zu stylen;

e [attr = val] passt zu jedem Element E mit dem Attributat und sein Wert ist Val. Obwohl es nicht neu ist, ist es nützlich, wenn die Formulareingangstypen aufgebracht werden.

e [attr | = val] entspricht jedem Element, dessen Attributat einen Wert von VAL hat oder mit Val- beginnt. Dies wird am h?ufigsten im Lang -Attribut verwendet. Zum Beispiel entspricht P [Lang | = "en"] jedem in englischen Englisch definierten Absatz, sei es in britischem oder amerikanischem Englisch, mit

oder

.

e [attr ~ = val] passt zu jedem Element, dessen Attributat das vollst?ndige Wort Val enth?lt (umgeben von R?umen). Zum Beispiel passt .info [title ~ = more] zu jedem Element mit Klasseninformationen und das Titelattribut enth?lt das Wort "mehr", z. B. "Klicken Sie hier, um mehr zu erfahren".

e [attr^= val] entspricht jedem Element, dessen Attributat mit dem Wert Val beginnt. Mit anderen Worten, Val entspricht dem Beginn des Eigenschaftswerts.

e [attr $ = val] entspricht jedem Element, dessen Attributat mit endet. Mit anderen Worten, Val entspricht dem Ende des Eigenschaftswerts.

e [attr = val] passt zu jedem Element, dessen Attribut Attrig an jeder Position übereinstimmt. Es ?hnelt E [attr ~ = val], au?er dass Val Teil eines Wortes sein kann. Mit dem gleichen Beispiel wie zuvor stimmt .Fakelink [Titel = info] {} über ein beliebiges Element mit der Klasse fakelink überein und das Title -Attribut enth?lt die String -Info, z. B. "Klicken Sie hier, um mehr zu erfahren".

In diesen Eigenschaftsauswahlern ist der Wert von VAL für den Fallempfindungswert in HTML sensibel. Beispielsweise ist Eingabe [class^= "btn"] Fallempfindlichkeit, da die Klassennamen Fallempfindlichkeit sind, aber Eingabe [type = "CheckBox"] Fallempfindlichkeit, da die Typwerte in HTML Fall-unempfindlich sind.

Wenn der Wert alphanumerisch ist, ist der Wert nicht erforderlich, aber es gibt einige Ausnahmen. Leere Saiten, Saiten, die mit Zahlen, zwei Bindestrichen und anderen Sonderf?llen beginnen, müssen in Zitate eingeschlossen sein. Da es Ausnahmen gibt, ist es eine gute Idee, die Gewohnheit zu entwickeln, immer Zitate für Situationen aufzunehmen, in denen Zitate erforderlich sind.

In der CSS-Selektorstufe 4 k?nnen wir die Fall-Unempfindlichkeit erreichen, indem wir ein I vor der Endklasse, e [attr*= val i], einbeziehen.

FAQs über relationale Selektoren und Attribut -Selektoren in CSS3

Was ist der Unterschied zwischen einem Beziehungsauswahl und einem Eigenschaftsselector in CSS3?

Der Beziehungsw?hltektor in CSS3 wird verwendet, um Elemente basierend auf ihrer Beziehung zu anderen Elementen in einem HTML -Dokument auszuw?hlen. Zum Beispiel sind Kinderelemente, Nachkommen, benachbarte Brüder und universelle Bruderauswahlbergs alle Arten von relationalen Selektoren. Andererseits wird der Attribut -Selektor verwendet, um ein Element basierend auf seinem Attribut- oder Attributwert auszuw?hlen. Sie k?nnen beispielsweise den Eigenschaftsselector verwenden, um alle Eingabelemente mit einem Typ -Attribut von "Text" auszuw?hlen.

Wie verwendet man einen Subcombinator in CSS3?

Der Subcombinator in CSS3 wird durch das Symbol "& gt" dargestellt. Es wird verwendet, um direkte untergeordnete Elemente eines bestimmten Elements auszuw?hlen. Wenn Sie beispielsweise alle direkten untergeordneten Divelemente des übergeordneten Elements mit der Klasse "Eltern" ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

.parent > div { /* CSS 屬性在此處 */ }

Kann ich mehrere Eigenschaftsauswahlern in CSS3 verwenden?

Ja, Sie k?nnen mehrere Eigenschaftsauswahlern in CSS3 verwenden. Auf diese Weise k?nnen Sie Elemente ausw?hlen, die mehrere Attributbedingungen erfüllen. Wenn Sie beispielsweise alle Eingabelemente mit dem Typ -Attribut "Text" und des Namens "Benutzername" ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

input[type="text"][name="username"] { /* CSS 屬性在此處 */ }

Was ist der Zweck des benachbarten Bruderkombinators in CSS3?

Der angrenzende Bruder -Kombinierer in CSS3 wird durch das Symbol "" "" dargestellt. Es wird verwendet, um Elemente auszuw?hlen, die direkt hinter einem anderen spezifischen Element liegen, und die beiden Elemente teilen das gleiche übergeordnete Element. Wenn Sie beispielsweise ein Div -Element ausw?hlen m?chten, das direkt hinter dem P -Element liegt, sollten Sie das folgende CSS schreiben:

p div { /* CSS 屬性在此處 */ }

Wie w?hlt ich ein Element mit einem bestimmten Attributwert in CSS3 aus?

Um ein Element mit einem spezifischen Attributwert in CSS3 auszuw?hlen, verwenden Sie den Attribut -Selektor, den Attributnamen und den Wert mit quadratischen Klammern. Wenn Sie beispielsweise alle Eingabelemente mit dem Typ -Attribut "Text" ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

input[type="text"] { /* CSS 屬性在此處 */ }

Kann ich Beziehungsauswahl- und Attribut -Selektoren in CSS3 kombinieren?

Ja, Sie k?nnen Beziehungsauswahl- und Attribut -Selektoren in CSS3 kombinieren. Auf diese Weise k?nnen Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen und ihren Eigenschaften ausw?hlen. Wenn Sie beispielsweise alle direkten untergeordneten Eingangselemente eines Formularelements mit der Klasse "Form" ausw?hlen m?chten, wobei das Typ -Attribut des Eingabeelements "Text" lautet, sollten Sie das folgende CSS schreiben:

form.form > input[type="text"] { /* CSS 屬性在此處 */ }

Was ist der universelle Bruderkombinator in CSS3?

Der universelle Geschwister -Kombinierer in CSS3 wird durch das Symbol "~" dargestellt. Es wird verwendet, um Geschwisterelemente eines bestimmten Elements auszuw?hlen, unabh?ngig von ihrer Ordnung im HTML -Dokument. Wenn Sie beispielsweise alle Geschwisterdivelelemente des P -Elements ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

p ~ div { /* CSS 屬性在此處 */ }

Wie w?hlt ich Elemente in CSS3 aus, die keine spezifischen Attribute haben?

Um Elemente auszuw?hlen, die in CSS3 keine spezifischen Attribute haben, verwenden Sie die: Not () Pseudo-Klasse mit Attributauswahl. Wenn Sie beispielsweise alle Eingabelemente ausw?hlen m?chten, deren Typattribut nicht "Senden" ist, sollten Sie das folgende CSS schreiben:

input:not([type="submit"]) { /* CSS 屬性在此處 */ }

Kann ich Relationship-Selektoren in CSS3 mit Pseudoklassen verwenden?

Ja, Sie k?nnen Beziehungsauswahlern in CSS3 mit Pseudoklassen verwenden. Auf diese Weise k?nnen Sie Elemente basierend auf ihrer Beziehung zu anderen Elementen und ihrem Zustand ausw?hlen. Wenn Sie beispielsweise alle direkten Kindeselemente des Navigationselements ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

nav > a:hover { /* CSS 屬性在此處 */ }

Wie w?hlt man ein Element in CSS3 aus, das ein spezifisches Attribut mit einem bestimmten Wert enth?lt?

Um ein Element auszuw?hlen, das ein spezifisches Attribut mit einem bestimmten Wert in CSS3 enth?lt, verwenden Sie den Sely Bracked Property Selector, den Attributnamen und den Wert von *= Operator. Wenn Sie beispielsweise alle A -Elemente mit HREF -Attributen mit "Beispiel" ausw?hlen m?chten, sollten Sie das folgende CSS schreiben:

a[href*="example"] { /* CSS 屬性在此處 */ }

Das obige ist der detaillierte Inhalt vonRelationale und Attributauswahlern in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!