Was sind die Attributselektoren von CSS-Selektoren?

Zu den Attributselektoren von CSS-Selektoren gehören der Gleichselektor, der Enthält-Selektor, der Start-Selektor, der End-Selektor, der Teilzeichenfolgen-Selektor, der Mehrwert-Selektor und der Negativ-Selektor usw. Ausführliche Einführung: 1. Der Gleichheitsselektor bedeutet mit eckigen Klammern und Gleichheitszeichen die Auswahl von Elementen mit angegebenen Attributwerten. 2. Der enthaltende Selektor mit eckigen Klammern und Sternchen bedeutet die Auswahl von Elementen, die den Attributwert der angegebenen Zeichenfolge enthalten. Um den Selektor zu starten, verwenden Sie eckige Klammern und Sternchen, um Elemente auszuwählen, deren Attributwerte mit der angegebenen Zeichenfolge 4 beginnen. Um den Selektor zu beenden, verwenden Sie eckige Klammern und Dollarzeichen usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

CSS-Selektoren bieten eine Vielzahl von Attributselektoren zum Auswählen von Elementen basierend auf ihren Attributwerten. Diese Attributselektoren können basierend auf Gleichheit, Einschluss, Anfang, Ende usw. von Attributwerten auswählen. Im Folgenden sind gängige Attributselektoren in CSS aufgeführt:

1. Gleichheitsselektor: Verwenden Sie eckige Klammern ([]) und Gleichheitszeichen (=), um Elemente mit angegebenen Attributwerten auszuwählen. „[class="red"]` bedeutet beispielsweise, dass alle Elemente ausgewählt werden, deren Klassenattributwert „rot“ ist.

2. Enthält Selektor: Verwenden Sie eckige Klammern ([]) und Sternchen (*), um Elemente auszuwählen, die den Attributwert der angegebenen Zeichenfolge enthalten. Beispielsweise bedeutet „[href*="example"]`, alle Elemente auszuwählen, deren href-Attributwert „example“ enthält.

3. Beginnt mit Selektor: Verwenden Sie eckige Klammern ([]) und spitze Zeichen (^), um Elemente auszuwählen, deren Attributwerte mit der angegebenen Zeichenfolge beginnen. Beispielsweise bedeutet „[class^="red"]`, dass alle Elemente ausgewählt werden, deren Klassenattributwert mit „red“ beginnt.

4. Endet mit Selektor: Verwenden Sie eckige Klammern ([]) und das Dollarzeichen ($), um Elemente mit Attributwerten auszuwählen, die mit der angegebenen Zeichenfolge enden. Beispielsweise bedeutet „[class$="red"]`, dass alle Elemente ausgewählt werden, deren Klassenattributwert mit „red“ endet.

5. Teilzeichenfolgenauswahl: Verwenden Sie eckige Klammern ([]) und vertikale Balkensymbole (|), um Elemente mit angegebenen Attributwerten auszuwählen, oder der Attributwert beginnt mit der angegebenen Zeichenfolge und wird von einem Bindestrichelement gefolgt. „[lang|="en"]` bedeutet beispielsweise, dass alle Elemente ausgewählt werden, deren lang-Attributwert „en“ ist, oder Elemente, deren Attributwert mit „en-“ beginnt.

6. Auswahl mehrerer Werte: Verwenden Sie eckige Klammern ([]) und das Gleichheitszeichen (=), um mehrere Attributwerte gleichzeitig anzugeben, was bedeutet, dass Elemente mit einem der angegebenen Attributwerte ausgewählt werden. Trennen Sie mehrere Attributwerte durch Leerzeichen. Beispielsweise bedeutet „[class="red blue"]`, dass alle Elemente ausgewählt werden, deren Klassenattributwert „rot“ oder „blau“ ist.

7. Negationsselektor: Verwenden Sie eckige Klammern ([]) und Doppelpunkt (:not()), um Elemente auszuwählen, die nicht den angegebenen Attributwert haben. Beispielsweise bedeutet „[class]:not([class="red"])`, alle Elemente auszuwählen, die ein Klassenattribut haben, aber nicht „rot“ sind.

Die oben genannten sind gängige Attributselektoren in CSS. Mithilfe dieser Selektoren können wir Elemente in Webseiten basierend auf ihren Attributwerten auswählen und formatieren, um reichhaltige und vielfältige Effekte zu erzielen. Gleichzeitig können Attributselektoren auch in Kombination mit anderen Selektoren und Pseudoklassenselektoren verwendet werden, um den Auswahlumfang und die Auswahlbedingungen weiter zu erweitern.

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