Detaillierte Einführung in die neuen Funktionen von Attributselektoren in CSS3

Null, Übersicht

Der von CSS2 unterstützte Attributselektor verwendet einen Ausdruck [{attribute| attribute{= |= | ~=} value}]
1.[class="a"] kann nur Elemente mit class="a"
zuordnen. 2.[class~="a"] kann Elemente mit class="a" und class="a b"
zuordnen 3.[lang|=en] kann mit den Elementen lang="en" und lang="en-us" übereinstimmen.

CSS3 fügt drei neue Matching-Methoden hinzu: *=, ^= und $= [{attribute | , [href="163"] kann mit href="163.com", href="mail.163.com" und anderen Elementen übereinstimmen.
2.^= bedeutet, dass mit dem angegebenen Zeichen begonnen wird, [href^="; /" ] sucht nach Elementen mit href="/a/a.htm" und href="/b"
3.$= bedeutet, dass es mit dem angegebenen Zeichen endet, [scr$=".png"] passt zu allen PNG-Bildern , Beispielsweise umfassen src="logo.png"

CSS3-Attributselektoren hauptsächlich die folgenden Typen:

1.E[attr]: verwendet nur den Attributnamen, bestimmt jedoch keinen Attributwert;
2.E[attr="value"]: Geben Sie den Attributnamen und den Attributwert des Attributs an.
3.E[attr~="value"]: Geben Sie den Attributnamen an und geben Sie an der Attributwert. Der Wert ist eine durch Leerzeichen getrennte Wortliste, und das „?“ vor dem Gleichheitszeichen muss geschrieben werden. value"]: Geben Sie an, dass der Attributname angegeben ist, und es gibt einen Attributwert, und der Attributwert beginnt mit value;
5.E[attr$="value"]: Der Attributname ist angegeben, und es gibt ihn ein Attributwert, und der Attributwert endet mit value;
6.E[attr*="value"]: Der Attributname ist angegeben, und es gibt einen Attributwert, und der Attributwert enthält value;
7.E[attr|="value"]: Specified Der Attributname ist angegeben und der Attributwert ist value oder ein Wert, der mit „value-“ beginnt (z. B. zh-cn);
1. E[attr]:
Der Attributselektor ist CSS3. Der einfachste Typ eines Attributselektors. Wenn Sie Elemente mit einem bestimmten Attribut auswählen möchten, unabhängig vom Attributwert, können Sie diesen Attributselektor verwenden:

Sie können auch mehrere Attribute verwenden, um Elemente auszuwählen , wie E[attr1][attr2], sodass jedes Element mit beiden Attributen ausgewählt wird:

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

Hinweis: IE6 unterstützt diesen Selektor nicht.

.demo a[href][title] {background: yellow; color:green;}

2. E[attr="value"]:

gibt den Attributwert „value“ an

Hinweis: Attribute und Attribute Die Werte müssen genau übereinstimmen, insbesondere wenn der Attributwert in Form einer Wortliste vorliegt, wie zum Beispiel:

.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}

test

IE6 unterstützt diesen Selektor nicht .

.demo a[class="links"]{color:red};   
.demo a[class="links item"]{color:red};

3. E[attr~="value"]:

Wenn Sie Elemente basierend auf einem Wort in der Wortliste im Attributwert auswählen möchten, müssen Sie dieses Attribut verwenden Auswahlselektor: E[attr~="value"], dieser Attributselektor besteht darin, dass der Attributwert eine Liste mit einem oder mehreren Wörtern ist. Wenn es sich um eine Liste handelt, müssen diese durch Leerzeichen getrennt werden Der zuvor erwähnte E[attr="value"] bedeutet, dass der Attributwert vollständig übereinstimmen muss, bevor er ausgewählt werden kann. Zeichen und das andere hat kein „?“-Zeichen.

Hinweis: Wenn im Attributselektor eine Welle (?) vorhanden ist, wird der Attributwert abgeglichen. Wenn keine Welle (?) vorhanden ist, muss der Attributwert übereinstimmen völlig wertig sein. IE6 unterstützt den Attributselektor E[attr~="value"] nicht.

.demo a[title~="website"]{background:orange;color:green;}

4. E[attr^="value"]:

Wählen Sie alle Elemente aus, deren attr-Attributwert mit „value“ beginnt. Mit anderen Worten, das ausgewählte Attribut hat den entsprechenden Attributwert. Es beginnt mit „Wert“.

Hinweis: IE6 unterstützt den E[attr^="value"]-Selektor nicht.

.demo a[href^="http://"]{background:orange;color:green;}

5. E[attr$="value"]:

E[attr$="value"] Attributselektor ist genau das Gegenteil von E[attr^="value"] Selektor , E[attr$="value"] bedeutet, alle Elemente auszuwählen, deren attr-Attributwert mit „value“ endet. Mit anderen Worten, es wählt das attr-Attribut des Elements aus und sein Attributwert endet mit value Für das Hinzufügen von Hintergrundbildern zu einigen speziellen Links können wir beispielsweise dieses Attribut verwenden

Hinweis: IE6 unterstützt den E[attr$="value"]-Attributselektor nicht.

.demo a[href$="png"]{background:orange;color:green;}

6. E[attr*="value"]:

Wählen Sie alle Elemente aus, deren attr-Attributwert die Teilzeichenfolge „value“ enthält. Mit anderen Worten: Solange das von Ihnen ausgewählte Attribut diesen „Wert“-Wert in seinem Attributwert hat, wird es ausgewählt.

Hinweis: IE6 unterstützt den E[attr*="value"]-Selektor nicht.

.demo a[title*="site"]{background:black;color:white;}

7. E[attr|="value"]:

wird als spezifischer Attributselektor bezeichnet. Dieser Selektor wählt alle Elemente aus, deren attr-Attributwert gleich value ist oder mit value- beginnt.

Hinweis: Wird häufig zum Abgleichen von Sprachen verwendet. IE6 unterstützt den E[attr|="value"]-Selektor nicht.

.demo a[lang|="zh"]{background:gray;color:yellow;}

Hinweise:
1. Außer IE6, das den Attributselektor nicht unterstützt, können andere Browser ihn unterstützen.
2.E[attr="value"] und E[attr*="value"] sind die praktischsten, von denen E[attr="value"] uns beim Auffinden verschiedener Arten von Elementen, insbesondere Formen, helfen kann. Elementoperationen wie input[type="text"], input[type="checkbox"] usw. und E[attr*="value"] können uns dabei helfen, verschiedene Dateitypen auf der Website abzugleichen, z Ihre Links zu verschiedenen Dateitypen auf Ihrer Website müssen unterschiedliche Symbole verwenden, um die Benutzererfahrung Ihrer Website zu verbessern. Genau wie im vorherigen Beispiel können Sie dieses Attribut für „.doc“, „.pdf“, „.png“ verwenden. „.ppt“ konfiguriert verschiedene Icons.

Ausführlichere Einführungen in die neu hinzugefügten Funktionen von Attributselektoren in CSS3 und verwandte Artikel finden Sie auf der chinesischen PHP-Website!