Heim > Artikel > Web-Frontend > Was ist der grundlegende CSS-Selektor?

Was ist der grundlegende CSS-Selektor?

青灯夜游Original: 2021-11-02 18:25:229459Durchsuche

Die grundlegenden Selektoren von CSS beziehen sich auf: 1. Platzhalterselektor; 3. Klassenselektor; 5. Kombinierter Elementselektor;

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Einführung in Basisselektoren

Basisselektoren sind in sechs Verwendungsmethoden unterteilt: Wildcard-Selektor, Tag-Selektor, Klassenselektor, ID-Selektor, kombinierter Elementselektor und Mehrklassenselektor.
Grundlegendes Anleitungsblatt zur Verwendung des Selektors.

Selektor	Syntaxformat	Bedeutung	Beispiel
Wildcard-Selektor	*{Attribut: Wert;}	Der universelle Selektor kann alle Elemente auswählen auf der Seite und Stile anwenden auf sie, gekennzeichnet durch *. Es wird nicht empfohlen, es zu verwenden. IE6 unterstützt es nicht und erhöht die Belastung großer Websites.	*{width: 300px;}
Tag-Selektor	Tag-Name {attribute: value;}	Tag-Selektor, passend zum entsprechenden HTML-Tag.	h1{Farbe: rot;}
Klassenselektor	.Klassenattributwert {attribute: value;}	Der Klassenselektor legt Stile für Elemente mit angegebenen Klassenattributwerten fest.	.box{color: red;}
Id-Selektor	#id-Attributwert {attribute: value;}	Id-Selektor, in einem HTML-Dokument wird der Id-Selektor einmal und nur einmal verwendet. ID-Selektoren werden mit # definiert.	#box{color: red;}
Kombiniert mit dem Elementselektor	Tagname .class-Attributwert {attribute: value}	Der Selektor wählt Elemente basierend auf dem Tagnamen aus, der das angegebene .class-Attribut enthält Wert.	p.box {color:red;}
Mehrklassenselektor	.class attribute value.class attribute value {attribute: value;}	Durch die Verknüpfung zweier Klassenselektoren werden nur Elemente ausgewählt, die beide enthalten dieser Klassennamen (in beliebiger Reihenfolge). Hinweis: In Versionen vor IE7 hat Internet Explorer auf verschiedenen Plattformen Multityp-Selektoren nicht korrekt verarbeitet.	.box.box1{color:red;}

Wildcard-Selektor

Als nächstes beginnen wir mit der Praxis des universellen Selektors. Der Autor verwendet das eingebettete Formular, um das h1-Tag und p auf der <code>HTML-Seite zu kombinieren . Die Schriftfarbe im -Tag ist auf Rot eingestellt. HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通配符选择器</title>
		<style>
			* {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

结果图

Was ist der grundlegende CSS-Selektor?

标签选择器

接下来让我们进入标签选择器实践，笔者以嵌入式的形式，将HTML页面中的h1标签和p标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>
	</body>
</html>

结果图

Was ist der grundlegende CSS-Selektor?

注意：标签选择器是指给指定的标签设置样式。

代码块

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图
现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>标签选择器</title>
		<style>
			h1 {
				color: red;
			}

			p {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图

类选择器

接下来让我们进入类选择器实践，笔者以嵌入式的形式，使用类的属性值为.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。
首先我们将HTML页面中的第一个h1标签字体颜色设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>类选择器</title>
		<style>
			.box {
				color: red;
			}
		</style>
	

	
		<h1>成功不是击败别人，而是改变自己。</h1>
		<h1>PHP中文网</h1>
		<p>PHP中文网</p>

结果图
注意：只要是class属性的值为.box的标签，不管它是什么标签，都会将字体颜色设置为红色，其余的CSS样式也是一致。
现在我们将第二个h1标签和p标签字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>类选择器</title>
    <style>
        .box{
            color:red;
        }
    </style>
</head>

<body>
    <h1 class="box">成功不是击败别人，而是改变自己。</h1>
	<h1 class="box">PHP中文网</h1>
	<p class="box">PHP中文网</p>
</body>
</html>

结果图

Id选择器

接下来让我们进入id选择器实践，笔者以嵌入式的形式，通过id属性值为#box，将HTML页面中的h1标签中的字体颜色设置为红色。
代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id选择器</title>
		<style>
			#box {
				color: red;
			}
		</style>
	</head>

	<body>
		<h1 id="box">成功不是击败别人，而是改变自己。</h1>
	</body>
</html>

结果图
注意：使用id选择器是给拥有指定的id属性值来设置样式，但是要注意在一个HTML页面中id的属性值必须是唯一的。

结合元素选择器

接下来让我们进入结合元素选择器实践，笔者以嵌入式的形式，通过h2标签class属性值为.box元素的字体颜色，设置为红色。
代码块

nbsp;html>

	
		<meta>
		<title>结合元素选择器</title>
		<style>
			h2.box {
				color: red;
			}
		</style>
	

	
		<h2>成功不是击败别人，而是改变自己。</h2>
		<span>成功不是击败别人，而是改变自己。</span>

结果图
注意：结合元素选取器执行原理说明如下：首先是先找到h2标签，然后再去h2标签中找class属性值为.box，如果找到class属性值为.box就给其设置样式。现在大家应该知道了span标签下面的class属性值为.box为什么没有渲染的原因了。

多类选择器

接下来让我们进入多类选择器实践，笔者以嵌入式的形式，将class属性值包含.box和.box1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>多类选择器</title>
		<style>
			.box.box1 {
				color: red;
			}
		</style>
	</head>

	<body>
		<h2 class="box1 box">成功不是击败别人，而是改变自己。</h2>
		<span class="box box1">成功不是击败别人，而是改变自己。</span>
		<h2 class="box1 ">PHP中文网</h2>
		<span class="box">PHP中文网</span>
	</body>
</html>

Ergebnisbild Was ist der grundlegende CSS-Selektor?

🎜🎜

🎜

Tag-Selektor🎜🎜🎜Als nächstes beginnen wir mit der Tag-Selektor-Übung. Der Autor verwendet das eingebettete Formular, um `Die Schriftart Die Farbe im <code>h1`-Tag und im `p`-Tag in der HTML-Seite ist auf Rot gesetzt. 🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild🎜🎜🎜🎜🎜
🎜🎜Hinweis: Die Tag-Auswahl bezieht sich auf die Festlegung des Stils für das angegebene Tag. 🎜🎜🎜🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild
🎜🎜🎜🎜Jetzt sollte jeder wissen, warum sich das `p`-Tag nicht geändert hat, denn die Rolle des Tag-Selektors besteht darin, das zuzuweisen angegebenes Tag Um den Stil festzulegen, stelle ich als nächstes die Schriftfarbe des `p`-Tags auf Rot ein. 🎜🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild
🎜🎜🎜
Class Selector🎜🎜🎜Als nächstes geben wir die Übung zur Klassenauswahl ein. Der Autor verwendet ein eingebettetes Formular. Verwenden Sie das Attribut Der Wert der Klasse muss `.box` sein, um das Tag `h1` und das Tag `p` auf der Seite `HTML` zu vervollständigen Die Farbe ist auf Rot eingestellt. 🎜🎜Zuerst setzen wir die Schriftfarbe des ersten `h1`-Tags auf der `HTML`-Seite auf Rot. 🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild
🎜🎜🎜🎜Hinweis: Solange der Wert des Attributs `class` `.box` ist, unabhängig vom Tag Wenn dies der Fall ist, wird die Schriftfarbe auf Rot gesetzt und die übrigen `CSS`-Stile bleiben gleich. 🎜🎜🎜🎜Jetzt setzen wir die Schriftfarbe des zweiten `h1`-Tags und `p`-Tags auf Rot. 🎜🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild
id als `#box`, um das Tag `h1` auf der Seite `HTML` zu ändern. Die Schriftfarbe ist auf Rot eingestellt. 🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild🎜🎜 8. png" alt="Was ist der grundlegende CSS-Selektor?"/>
🎜🎜🎜🎜Hinweis: Verwendung des `id`-Selektors besteht darin, den Stil mit dem angegebenen `id`-Attributwert festzulegen. Beachten Sie jedoch, dass der Attributwert von `id` auf einer `HTML`-Seite eindeutig sein muss. 🎜🎜🎜
Combined element selector🎜🎜🎜🎜Als nächstes beginnen wir mit der Praxis des Kombinierens von Elementselektoren. Der Autor verwendet das Tag `h2` in eingebetteter Form des Attributs `class` ist die Schriftfarbe des Elements `.box`, die auf Rot eingestellt ist. 🎜🎜🎜🎜Codeblock🎜🎜🎜rrreee🎜🎜🎜Ergebnisbild
🎜🎜🎜🎜Hinweis: Das Ausführungsprinzip des Elementselektors wird wie folgt erklärt: Suchen Sie zuerst das Tag `h2` und gehen Sie dann zu h2 Suchen Sie den Attributwert `class` im -Tag als `.box`. Wenn der Attributwert `class` gefunden wird, wird der Der Wert ist `.box`. Gestalten Sie ihn einfach. Jetzt sollte jeder den Grund kennen, warum der Attributwert `class` unter dem Tag `span` `.box` ist und nicht gerendert wird. 🎜🎜🎜

Multi-class selector 🎜🎜🎜🎜 Lassen Sie uns als Nächstes in die Praxis des Multi-class-Selektors eintreten. Der Autor verwendet `class enthält die Schriftfarbe der Elemente <code>.box` und `.box1`, die auf Rot gesetzt sind. 🎜🎜🎜🎜Codeblöcke🎜🎜🎜rrreee🎜🎜🎜
Hinweis: Das Ausführungsprinzip des Multi-Kategorie-Selektors wird wie folgt erklärt: Erstens wird `class`属性值可以设置为多个以空格隔开即可，举例：如果一个`class`属性值包含`.box`和`.box1`将其设置样式，通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。现在大家应该知道了单独的`class`属性值为`.box`和`.box1` nicht gerendert.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas ist der grundlegende CSS-Selektor?. 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：Was ist die chinesische Bedeutung von HTML?Nächster Artikel：Was ist die chinesische Bedeutung von HTML?

In Verbindung stehende Artikel

Mehr sehen