Heim Web-Frontend CSS-Tutorial Was sind CSS-Selektoren? Welche Arten von CSS-Selektoren gibt es?

Was sind CSS-Selektoren? Welche Arten von CSS-Selektoren gibt es?

Nov 03, 2018 pm 02:44 PM
css选择器

In CSS-Stilen bestehen sie im Allgemeinen aus drei Teilen: Selektoren, Attributen und Attributwerten. Viele CSS-Neulinge sind jedoch mit CSS-Selektoren nicht sehr vertraut. Welche Arten von CSS-Selektoren gibt es? [Empfohlene Lektüre: Zusammenfassung der Verwendung von 30 CSS3-Selektoren]

Schauen wir uns zuerst einen Code an:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>什么叫CSS选择器?</title>
</head>
<body>
    <div>php1</div>
    <div>php2</div>
    <div>php3</div>
</body>
</html>
Nach dem Login kopieren

Der Effekt ist wie folgt folgt:

Was sind CSS-Selektoren? Welche Arten von CSS-Selektoren gibt es?

Was ist, wenn wir PHP2 auf Blau setzen wollen? Wir müssen eine Möglichkeit verwenden, das zweite Div auszuwählen und dann die Farbe seines CSS-Attributs in Blau zu ändern. Ändern Sie auf diese Weise ein bestimmtes Element in den gewünschten Effekt und wählen Sie die gewünschte Bezeichnung aus „Selektor“, was bedeutet, dass der Selektor eine Möglichkeit zum Auswählen von Elementen darstellt.

Der sogenannte Selektor besteht, um es ganz klar auszudrücken, darin, eine Methode zu verwenden, um das gewünschte Tag auszuwählen! Erst nachdem Sie es ausgewählt haben, können Sie den CSS-Stil dieses Tags bedienen. Das ist ganz einfach. CSS bietet viele Möglichkeiten, die benötigten Tags auszuwählen, und diese verschiedenen Möglichkeiten sind unterschiedliche Selektoren.

2: Welche Arten von CSS-Selektoren gibt es?

1 (Zum Beispiel: class="head", class="head_logo")

3. Globaler Auswahlselektor (z. B. *)

5. Selektor kombinieren (z. B. .head .head_logo, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind)

6 (zum Beispiel: div p, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind)

7. Pseudoklassenselektor (zum Beispiel: Linkstil, Pseudoklasse eines Elements, 4 verschiedene Zustände: Link , besucht, aktiv, schweben.)

8. Attributselektoren für den String-Abgleich (^ $ * drei Typen, entsprechend dem Anfang, Ende und Einschluss)

Das Obige ist die Antwort Was ist ein CSS-Selektor? Eine vollständige Einführung in die Arten von CSS-Selektoren. Wenn Sie mehr über das

CSS3-Tutorial

erfahren möchten, folgen Sie der chinesischen PHP-Website.

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

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So ändern Sie die Größe eines HTML-Textfelds So ändern Sie die Größe eines HTML-Textfelds Feb 20, 2024 am 10:03 AM

Das Festlegen der Größe von HTML-Textfeldern ist ein sehr häufiger Vorgang in der Frontend-Entwicklung. In diesem Artikel wird erläutert, wie Sie die Größe eines Textfelds festlegen, und es werden spezifische Codebeispiele bereitgestellt. In HTML können Sie CSS verwenden, um die Größe eines Textfelds festzulegen. Der spezifische Code lautet wie folgt: input[type="text&quot

So passen Sie ein WordPress-Theme an, um eine falsch ausgerichtete Anzeige zu vermeiden So passen Sie ein WordPress-Theme an, um eine falsch ausgerichtete Anzeige zu vermeiden Mar 05, 2024 pm 02:03 PM

Um WordPress-Themes anzupassen, um eine fehlerhafte Anzeige zu vermeiden, sind spezifische Codebeispiele erforderlich. Als leistungsstarkes CMS-System wird WordPress von vielen Website-Entwicklern und Webmastern geliebt. Wenn Sie jedoch WordPress zum Erstellen einer Website verwenden, stoßen Sie häufig auf das Problem einer falschen Ausrichtung des Themes, was sich auf das Benutzererlebnis und die Schönheit der Seite auswirkt. Daher ist es sehr wichtig, Ihr WordPress-Theme richtig anzupassen, um eine falsch ausgerichtete Anzeige zu vermeiden. In diesem Artikel wird erläutert, wie Sie das Thema anhand spezifischer Codebeispiele anpassen.

Was ist die CSS-Selektorpriorität? Was ist die CSS-Selektorpriorität? Apr 25, 2024 pm 05:30 PM

Die CSS-Selektorpriorität wird in der folgenden Reihenfolge bestimmt: Spezifität (ID > Klasse > Typ > Platzhalter) Quellreihenfolge (Inline > Internes Stylesheet > Externes Stylesheet > Benutzeragenten-Stylesheet) Deklarationsreihenfolge (neueste Deklarationen haben Vorrang) Wichtigkeit (!important erzwingt eine Erhöhung der Priorität)

Was sind die Elemente im ausgeschlossenen Abschnitt des CSS-Selektors? Was sind die Elemente im ausgeschlossenen Abschnitt des CSS-Selektors? Apr 06, 2024 am 02:42 AM

Der :not()-Selektor kann unter bestimmten Bedingungen zum Ausschließen von Elementen verwendet werden und seine Syntax lautet :not(selector) {Stilregel}. Beispiele: :not(p) schließt alle Nicht-Absatzelemente aus, li:not(.active) schließt inaktive Listenelemente aus, :not(table) schließt Nicht-Tabellenelemente aus, div:not([data-role="primary"] ) Schließen Sie div-Elemente mit nicht primären Rollen aus.

Erhalten Sie ein tiefes Verständnis für die Gewichtung und Priorität von CSS-Selektor-Platzhaltern Erhalten Sie ein tiefes Verständnis für die Gewichtung und Priorität von CSS-Selektor-Platzhaltern Dec 26, 2023 pm 01:36 PM

Detailliertes Verständnis der Gewichtung und Priorität von CSS-Selektor-Platzhaltern. In CSS-Stylesheets sind Selektoren ein wichtiges Werkzeug zum Angeben, auf welche HTML-Elemente der Stil angewendet wird. Die Priorität und Gewichtung des Selektors bestimmen, welcher Stil angewendet wird, wenn mehrere Regeln gleichzeitig auf ein HTML-Element angewendet werden. Platzhalterselektoren sind ein häufiger Selektor in CSS. Es wird durch das Symbol „*“ dargestellt, was bedeutet, dass es mit allen HTML-Elementen übereinstimmt. Platzhalterselektoren sind einfach, können aber in bestimmten Situationen sehr nützlich sein. Allerdings auch das Gewicht und die Priorität von Wildcard-Selektoren

CSS-Selektoren, bei denen es sich um erweiterte Selektoren handelt CSS-Selektoren, bei denen es sich um erweiterte Selektoren handelt Oct 07, 2023 pm 02:59 PM

Zu den erweiterten Selektoren in CSS-Selektoren gehören Nachkommenselektoren, Selektoren für untergeordnete Elemente, Selektoren für benachbarte Geschwister, universelle Geschwisterselektoren, Attributselektoren, Klassenselektoren, ID-Selektoren, Pseudoklassenselektoren und Pseudoelementselektoren. Detaillierte Einführung: 1. Der Nachkommenselektor verwendet einen durch Leerzeichen getrennten Selektor, um die Nachkommenelemente eines Elements auszuwählen. 2. Der Unterelementselektor verwendet einen durch ein Größer-als-Zeichen getrennten Selektor, um die direkten Unterelemente eines Elements auszuwählen. Benachbarte gleichgeordnete Selektoren verwenden Selektoren, die durch ein Pluszeichen getrennt sind, um das erste gleichgeordnete Element auszuwählen, das unmittelbar auf ein Element folgt, und so weiter.

Lernen Sie die grundlegende Syntax der Verwendung von CSS-Selektoren kennen Lernen Sie die grundlegende Syntax der Verwendung von CSS-Selektoren kennen Jan 13, 2024 am 11:44 AM

Um die grundlegende CSS-Selektorsyntax zu beherrschen, sind spezifische Codebeispiele erforderlich. CSS-Selektoren sind ein sehr wichtiger Bestandteil der Frontend-Entwicklung. Sie können zum Auswählen und Ändern verschiedener Elemente von HTML-Dokumenten verwendet werden. Die Beherrschung der grundlegenden CSS-Selektorsyntax ist für das Schreiben effizienter Stylesheets von entscheidender Bedeutung. In diesem Artikel werden einige gängige CSS-Selektoren und entsprechende Codebeispiele vorgestellt. Elementselektor Der Elementselektor ist der einfachste Selektor, der das entsprechende Element anhand seines Tag-Namens auswählen kann. Um beispielsweise alle Absätze (p-Elemente) auszuwählen, können Sie verwenden

Erfahren Sie mehr über das responsive Layout-Framework: eine ausführliche Anleitung für Anfänger bis Experten Erfahren Sie mehr über das responsive Layout-Framework: eine ausführliche Anleitung für Anfänger bis Experten Feb 19, 2024 pm 05:43 PM

Analyse des Responsive-Layout-Frameworks: Ein wesentlicher Leitfaden für Anfänger bis Experten Mit der Beliebtheit und Diversifizierung mobiler Geräte ist Responsive-Layout zu einer wesentlichen Fähigkeit für modernes Webdesign geworden. Das responsive Layout-Framework ist aufgrund seiner Einfachheit, Flexibilität und Wartbarkeit zum bevorzugten Werkzeug für Entwickler geworden. Für Anfänger kann das Erlernen und Verstehen responsiver Layout-Frameworks jedoch etwas verwirrend sein. Vom Anfänger bis zum Experten bietet Ihnen dieser Artikel eine detaillierte Anleitung zur Beherrschung des responsiven Layout-Frameworks sowie konkrete Codebeispiele. Was ist reaktionsfähiges Tuch?

See all articles