Heim > Artikel > Web-Frontend > Was sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel)

Was sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel)

青灯夜游Original: 2018-09-15 09:23:353426Durchsuche

Dieses Kapitel stellt Ihnen vorWas sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiele) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. ID-Selektor

Der ID-Selektor kann einen bestimmten Stil für HTML-Elemente angeben, die mit einer bestimmten ID gekennzeichnet sind.

Das HTML-Element verwendet das id-Attribut, um den ID-Selektor festzulegen, und der ID-Selektor wird in CSS mit „#“ definiert.

Die folgenden Stilregeln gelten für die Elementattribute id="demo", id="para1":

#demo{ width: 500px; height: 200px; margin: 50px auto; } 
#para1 { text-align:center; color:red; }

Hinweis: Beginnen Sie das ID-Attribut nicht mit einer Zahl, die mit einer Zahl beginnt sind in Mozilla/Firefox. Funktioniert nicht im Browser.

Beispielcode:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id 选择器</title>
		<style>
		     #demo{ width: 500px; height: 200px; margin: 50px auto; } 
                     #para1 { text-align:center; color:red; }
		</style>
	</head>
	<body>
		<div id="demo">
			<p id="para1">Hello World!</p>
			<p>这个段落不受该样式的影响。</p>
		</div>
	</body>
</html>

Rendering:

Was sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel)

2. Klassenauswahl

Der Klassenselektor wird verwendet, um den Stil einer Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor und kann in mehreren Elementen verwendet werden.

Der Klassenselektor wird in HTML durch das Klassenattribut dargestellt. In CSS wird der Klassenselektor mit einem Punkt „.“ dargestellt:

Im folgenden Beispiel alle Objekte mit der Mittelklasse HTML-Elemente sind alle zentriert.

.center {text-align:center;}

Beispielcode:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class 选择器/title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Rendering:

Was sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel)

Sie können auch bestimmte HTML-Elemente mithilfe von Klassen angeben.

Im folgenden Beispiel verwenden alle p-Elemente class="center", um den Text des Elements zu zentrieren:

p.center {text-align:center;}

Hinweis: Das erste Zeichen des Klassennamens Zahlen können nicht verwendet werden! Es funktioniert nicht in Mozilla oder Firefox.

Codebeispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css教程</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

Rendering:

Was sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel)

Das obige ist der detaillierte Inhalt vonWas sind ID- und Klassenselektoren in CSS? Verwendung von ID- und Klassenselektoren (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

firefox css html class 选择器

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：Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)Nächster Artikel：Wie lege ich den Tabellenstil in CSS fest? (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen