Heim > Artikel > Web-Frontend > Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

青灯夜游Original: 2018-09-10 11:10:4910223Durchsuche

In diesem Kapitel erklären wir Ihnen, was ein CSS-Selektor ist. 5 gängige Grundselektoren in CSS3. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1: Was ist der CSS-Selektor?

CSS ist eine Sprache, die zum Rendern von HTML, XML usw. auf dem Bildschirm verwendet wird. CSS wendet Stile hauptsächlich auf entsprechende Elemente an, um relativ angewendete Elemente darzustellen Es ist wichtig, das entsprechende Element auszuwählen. Um das entsprechende Element auszuwählen, ist ein sogenannter Selektor erforderlich. In CSS ist ein Selektor ein Muster, mit dem Elemente ausgewählt werden, die gestaltet werden müssen. Selektoren werden hauptsächlich verwendet, um DOM-Elementknoten in der Baumstruktur von HTML zu bestimmen.

2: 5 gängige Grundselektoren in CSS3

Es gibt viele Arten von Selektoren in CSS3. Im Folgenden sind 5 gängige Grundselektoren aufgeführt: Platzhalterselektoren, Klassenselektoren, Elemente Selektoren, ID-Selektoren und Gruppenselektoren.

1. Wildcard-Selektor (unterstützt von allen Browsern)
Der universelle Selektor wird durch * dargestellt und dient zur Auswahl aller Elemente unter einem bestimmten Element ;

*{marigin: 0;
   padding: 0;
   font-size: 14px;
}

Sie müssen einen Großteil des oben genannten Codes in der Reset-Style-Datei gesehen haben. Das bedeutet, dass der Rand und der Abstand aller Elemente auf 0 und die Schriftgröße auf 14 Pixel eingestellt sind . Das andere ist „Alle Elemente unter einem bestimmten Element auswählen“:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			.demo * {
				width: 50px;
				height: 50px;
				border:1px solid blue;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div>1</div>
			<p>2</p>
			<span>3</span>
		</div>
	</body>
</html>

Rendering:

Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

Wir können die drei Unterelemente div, p, in sehen Das Demo-Element wird nicht mit CSS-Stilen festgelegt. Solange wir jedoch einen einheitlichen Stil für alle Elemente unter dem Demo-Element festlegen, verfügen die drei Unterelemente div, p und span im Demo-Element über Stile.

2. Klassenselektor (Alle Browser unterstützen Klassenselektoren, aber Mehrklassenselektoren (.className1.className2) werden von ie6 nicht unterstützt.)

Der Klassenselektor Wählt basierend auf dem Klassennamen mit vorangestelltem „.“ aus, der den Stil unabhängig vom Dokumentelement angibt. Bevor Sie den Klassenselektor verwenden, müssen Sie den Klassennamen für das HTML-Element definieren. Sie müssen sicherstellen, dass der Klassenname im HTML-Tag vorhanden ist.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #2DC4CB;
			}

		</style>
	</head>
	<body>
		<div class="demo">类选择器</div>
	</body>
</html>

Rendering:

Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

3. Elementauswahl (unterstützt von allen Browsern)
Elementauswahl (Tag Namensselektor) ist der gebräuchlichste und einfachste Selektor unter den CSS3-Selektoren. Der Elementselektor ist tatsächlich das Element des Dokuments, z. B. HTML, Body, P, Div usw. Im folgenden Beispiel wird das Span-Element ausgewählt und die Schriftfarbe auf Rot festgelegt.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>元素选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
			}
			span{
			    color: red;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里使用<span>元素选择器</span>改变了样式</p>
		</div>
	</body>
</html>

Rendering:

Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

4. ID-Selektor (unterstützt von allen Browsern)

Der Der ID-Selektor ist dem oben genannten Klassenselektor sehr ähnlich. Bevor Sie den ID-Selektor verwenden, müssen Sie dem HTML-Dokument auch den ID-Namen hinzufügen, damit das entsprechende Element im Stilselektor gefunden werden kann Wenn wir die Klasse verwenden, fügen wir vor dem entsprechenden Klassennamen ein „.“-Zeichen hinzu. Der ID-Selektor verwendet „#“ vor dem Namen, z. B. (# demo).

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ID选择器</title>
		<style>
			#demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}

		</style>
	</head>
	<body>
		<div id="demo">ID选择器</div>
	</body>
</html>

Rendering:

Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)

Es gibt mehrere Stellen, die im ID-Selektor besondere Aufmerksamkeit erfordern:

Erstens: eine ID in einem Dokument Der Selektor darf nur einmal verwendet werden, da die ID auf der Seite eindeutig ist. Zweitens können ID-Selektoren nicht wie Klassenselektoren in Kombination verwendet werden und ein Element kann nur mit einem ID-Namen benannt werden.

Drittens können Sie denselben ID-Namen in verschiedenen Dokumenten verwenden. Sie können beispielsweise „#important“ für h1 in „test.html“ oder p für „test1.html“ definieren. Die ID ist „#important“, aber die Voraussetzung ist, dass in test.html oder test1.html nur eine ID mit dem Namen „#important“ zulässig ist.

5. Gruppenauswahl (von allen Browsern unterstützt)

Wenn mehrere Elemente die gleichen Stilattribute haben, können sie eine Anweisung zusammen aufrufen und durch Kommas getrennt verwenden. Gruppenselektoren gruppieren Elemente mit demselben Stil. Durch ein Komma wird dem Browser mitgeteilt, dass die Regel mehrere unterschiedliche Selektoren enthält Das Komma wird zum zuvor erwähnten Nachkommenselektor. Sie müssen bei der Verwendung vorsichtig sein.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>群组选择器</title>
		<style>
			.demo {
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background: #FF0000;
			}
			p,li{
			    color: blue;
			}
			.demo1,.demo2{
			 	color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<p>这里是一个段落!</p>
		    <ul><li>列表</li></ul>
		    <a href="#" class="demo1">链接一</a><br>
		    <span class="demo2">文字文字！</span>
		</div>
	</body>
</html>

Rendering:

Das obige ist der detaillierte Inhalt vonWas ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

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

Vorheriger Artikel：Verwenden Sie reines CSS, um ein Dropdown-Menü zu implementieren, das angezeigt wird, nachdem die Maus darüber geführt wird. Beispielerklärung (mit Code).Nächster Artikel：Verwenden Sie reines CSS, um ein Dropdown-Menü zu implementieren, das angezeigt wird, nachdem die Maus darüber geführt wird. Beispielerklärung (mit Code).

In Verbindung stehende Artikel

Mehr sehen