Was ist der Attributselektor von CSS? Verwendung von Attributselektoren

Was ist der Attributselektor von CSS? In diesem Artikel erfahren Sie mehr über den CSS-Attributselektor, damit Sie verstehen, was der Attributselektor tut und wie er verwendet wird. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Was ist der CSS-Attributselektor? Was ist der Nutzen?

Elemente in HTML können Attribute haben, bei denen es sich um zusätzliche Werte handelt, die ihr Verhalten anzeigen oder ändern. HTML enthält viele Attribute, aber nicht alle Attribute sind auf alle HTML-Elemente anwendbar. Eigenschaften, die nichts mit dem Element zu tun haben, haben keinen Einfluss darauf.

Unabhängig davon, ob die Eigenschaft korrekt angewendet wird, können Sie sie weiterhin über CSS auswählen. Allerdings ist die Verwendung ungültiger HTML-Attribute irgendwo auf Ihrer Website eine sehr schlechte Praxis, da verschiedene Browser ungültiges HTML unterschiedlich interpretieren. Sie können dem Browser nicht vorwerfen, dass er Ihre Website komisch aussehen lässt, er versucht lediglich, Ihren Fehlercode zu erklären, indem er die Lücken füllt.

Der CSS-Attributselektor ermöglicht es uns jedoch, Elemente mit bestimmten Attributen oder Attributen mit bestimmten Werten auszuwählen, d. h. wir können das entsprechende Tag basierend auf dem angegebenen Attributnamen finden und dann das Attribut festlegen. [Empfohlene verwandte Video-Tutorials: CSS3-Tutorial]

Verwendung des CSS-Attributselektors

Attributwerte in HTML Muss ein Bezeichner oder eine Zeichenfolge sein. Die Spezifikation ist eher vage, da sie besagt, dass die Groß-/Kleinschreibung von Eigenschaftsnamen und -werten in Selektoren von der Dokumentsprache abhängt. Da sich Browser inkonsistent verhalten, ist es am sichersten, sicherzustellen, dass die von Ihnen verwendeten Fälle zwischen CSS und HTML konsistent sind.

Attributselektoren können auf 7 Arten abgeglichen werden (ausgehend von der CSS3-Spezifikation):

1, []

Zielen auf alle ab Ein Element, das das Attribut enthält, unabhängig von seinem Wert.

Beispiel:

<div data-colour="green"></div>
<div data-colour="blue"></div>
<div data-colour="yellow"></div>

CSS-Code-Auswahl:

[data-colour] { 
   /* 一些性质，例：color..... */ 
}

2, [=]

Suchen Sie alle Elemente, deren -Attributwert ist.

<div data-colour="green"></div>

[data-colour="green"] { 
    /* 一些性质 */ 
}

3. [~=]

Verwenden Sie das Attribut , dessen Wert ein Leerzeichen ist -Getrennte Liste von Wörtern, von denen eines sein muss.

selbst darf keine Leerzeichen enthalten oder eine leere Zeichenfolge sein.

<div data-colour="green yellow blue"></div>

rrree

4. [|=]

Verwenden Sie das Attribut , um ein Element zu finden, dessen Wert genau ist. value> oder Beginnt mit , gefolgt von „-“.

Hinweis: Wird hauptsächlich beim Abgleich von Sprachsubcodes verwendet, z. B. „en“, „en-US“ und „en-UK“.

[data-colour~="green"] { 
    /* 一些性质 */ 
}

rrree

5. [^=]

Teilstring-Matching-Selektor. Verwenden Sie das Attribut , um Elemente zu finden, deren Werte mit beginnen.

Hinweis: darf kein leerer String sein.

<div data-colour="green-table"></div>
<div data-colour="green-chair"></div>
<div data-colour="green-bottle"></div>

rrree

6. [$=]

Teilstring-Matching-Selektor. Verwenden Sie das Attribut , um Elemente zu finden, deren Werte mit enden.

Hinweis: darf kein leerer String sein.

[data-colour|="green"] { 
    /* 一些性质 */ 
}

rrree

7. [*=]

Teilstring-Matching-Selektor. Verwenden Sie das Attribut , um ein Element zu finden, dessen Wert eine Instanz von enthält.

Hinweis: darf kein leerer String sein.

<div data-colour="greenish-yellow"></div>
<div data-colour="greengoblin"></div>

rrree

Kombinierte Attributselektoren

Attributselektoren haben das gleiche Maß an Spezifität wie Klassen und Pseudoklassen; Sie können Attributselektoren mit „Andere“ kombinieren Selektoren wie Element, Klasse oder ID werden miteinander kombiniert. Beispiel:

[data-colour^="green"] { 
    /* 一些性质 */ 
}

Sie können auch mehrere Attributselektoren kombinieren, um sie an bestimmte Muster anzupassen. Wenn Sie beispielsweise nur auf 2x Bilder mit Alternativtext mit dem Wort „grün“ abzielen möchten, würde Ihr Selektor so aussehen:

<div data-colour="yellowish-green"></div>
<div data-colour="seagreen"></div>

Da der Attributwert außerdem als Zeichenfolge gelesen wird, müssen Sie nicht Im Gegensatz zu Klassen oder IDs müssen Sie sich keine Gedanken darüber machen, Sonderzeichen zu maskieren, damit sie übereinstimmen. Das bedeutet, dass wir Folgendes haben können:

[data-emotion="

Das obige ist der detaillierte Inhalt vonWas ist der Attributselektor von CSS? Verwendung von Attributselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!