Heim >Web-Frontend >CSS-Tutorial >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:353452Durchsuche
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:
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:
 "153697421819320Was 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:
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!