Heim > Web-Frontend > Front-End-Fragen und Antworten > So verwenden Sie den Selektor, um gleiche und ungleiche Elemente in CSS zu erhalten

So verwenden Sie den Selektor, um gleiche und ungleiche Elemente in CSS zu erhalten

PHPz
Freigeben: 2023-04-26 16:56:55
Original
1257 Leute haben es durchsucht

In der Webentwicklung ist Cascading Style Sheets (kurz Cascading Style Sheets, CSS) eine Sprache, die zur Steuerung des Layouts und Erscheinungsbilds von Webseiten verwendet wird. CSS verfügt über viele leistungsstarke Funktionen, darunter der Selektor. Selektoren werden verwendet, um HTML-Elemente zu finden, auf die Stile angewendet werden sollen, z. B. das Festlegen von Schriftarten, Farben, Hintergründen usw.

In CSS-Selektoren gibt es viele verschiedene Symbole und Schlüsselwörter, mit denen sich unterschiedliche Auswahlmethoden definieren lassen. Zusätzlich zu den gängigen Klassenselektoren und ID-Selektoren können auch die Gleichheits- und Ungleichheitsoperatoren zur Auswahl bestimmter Elemente verwendet werden.

Gleichheitsoperator

Der Gleichheitsoperator (=) ist ein spezielles Symbol im Selektor, mit dem nur diejenigen ausgewählt werden können, deren Attributwerte den angegebenen entsprechen Wert. Der folgende Selektor wählt beispielsweise alle Schaltflächenelemente mit dem Klassenattributwert „button“ aus:

button[class="button"] {
  /CSS代码 /
}
Nach dem Login kopieren

Ein solcher Selektor wird nur auf Schaltflächenelemente mit dem Klassenattributwert „button“ angewendet. nicht auf andere Elemente anwenden. Diese Auswahlmethode ist für Sonderfälle nützlich, z. B. für die Steuerung des Stils durch die Verwendung benutzerdefinierter Eigenschaften.

Ungleich-Operator

Im Gegensatz zum Gleich-Operator wählt der Ungleich-Operator (!=) alle Elemente aus, deren Attributwerte nicht den angegebenen entsprechen Wert. Der folgende Selektor wählt beispielsweise alle Elemente aus, deren Klassenattributwert nicht gleich „button“ ist:

*[class!="button"] {
 / CSS代码 /
}
Nach dem Login kopieren

Ein solcher Selektor wählt keine Elemente aus, deren Klassenattributwert „button“ ist, sondern wählt andere Elemente. Alle Elemente. Diese Auswahlmethode ist nützlich, wenn Sie bestimmte Elemente von einigen Elementen ausschließen müssen.

Selektorkombination

Zusätzlich zur alleinigen Verwendung der Gleichheits- oder Ungleichheitsoperatoren können diese auch mit anderen Selektoren kombiniert werden, um das Zielelement genauer auszuwählen.

Zum Beispiel wählt der folgende Selektor alle Schaltflächenelemente aus, deren Klassenattributwert „button“ enthält, aber nicht mit „disabled“ endet:

button[class*="button"]:not([class$="disabled"]) {
 / CSS代码 /
}
Nach dem Login kopieren

Dieser Selektor enthält gleich und Ungleichheitsoperatoren sowie Wildcard-Selektoren und Pseudoklassen-Selektoren. Es werden nur Schaltflächenelemente ausgewählt, deren Klassenattributwert „button“ enthält, nicht jedoch Schaltflächenelemente, deren Klassenattributwert mit „disabled“ endet. Dies gibt uns eine sehr leistungsstarke Möglichkeit, Selektoren zu kombinieren, sodass wir die benötigten Elemente genauer auswählen können.

Fazit

In CSS sind Selektoren ein sehr nützliches Werkzeug, das uns helfen kann, das Layout und das Erscheinungsbild von Webseiten zu steuern. Die Gleichheits- und Ungleichheitsoperatoren sind zwei wichtige Selektorsymbole, die uns helfen können, bestimmte Elemente genauer auszuwählen. Die Selektorkombination geht noch einen Schritt weiter und kann durch die Kombination verschiedener Selektoren eine präzisere Selektion erreichen. Die Beherrschung dieser Selektoren kann unsere CSS-Kenntnisse erheblich verbessern und unsere Webseiten schöner und professioneller aussehen lassen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Selektor, um gleiche und ungleiche Elemente in CSS zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage