Relationale und Attributauswahlern in CSS3

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 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">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!