Heim > Artikel > Web-Frontend > Was sind die am häufigsten verwendeten grundlegenden CSS3-Selektoren?
Was sind die am häufigsten verwendeten grundlegenden CSS3-Selektoren?
- 青灯夜游Original
- 2021-12-20 10:51:047195Durchsuche
Zu den häufig verwendeten CSS3-Basisselektoren gehören: 1. Platzhalterselektor „*“; 2. Klassenselektor „.class name“; 4. ID-Selektor „#id name“; ,F,..." kann Elemente mit demselben Stil gruppieren. Verwenden Sie ein Komma ",", um die einzelnen Selektoren zu trennen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. 5 gängige Grundselektoren in CSS3 unter;
rrree Sie müssen einen Großteil des oben genannten Codes in der Reset-Style-Datei gesehen haben. Dies bedeutet, dass der Rand und der Abstand aller Elemente auf 0 und die Schriftgröße auf 14 Pixel eingestellt sind ist Wählen Sie alle Elemente unter einem bestimmten Element aus: *{marigin: 0;
padding: 0;
font-size: 14px;
}Rendering:
Wir können sehen, dass für die drei Unterelemente div, p und span im Demo-Element keine CSS-Stile festgelegt sind, sondern solange Wir legen fest: Wenn Sie einheitliche Stile für alle Elemente unter dem Demo-Element haben, haben die drei Unterelemente div, p und span im Demo-Element 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 aus, dem ein „“ vorangestellt ist. Mark gibt den Stil unabhängig vom Dokumentelement an. Bevor Sie den Klassenselektor verwenden, müssen Sie den Klassennamen für das HTML-Element definieren .<!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:
3. Elementselektor (von allen Browsern unterstützt)
Elementselektor (Tag-Namen-Selektor) ist der gebräuchlichste und grundlegendste Selektor unter den CSS3-Selektoren. Der Elementselektor ist tatsächlich das Element des Dokuments, z. B. HTML, Body, P, P 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;
background: #2DC4CB;
}
</style>
</head>
<body>
<div class="demo">类选择器</div>
</body>
</html>Rendering: 
4. ID-Selektor (von allen Browsern unterstützt)
Der ID-Selektor ist dem oben genannten Klassenselektor sehr ähnlich und wird auch vor der Verwendung des ID-Selektors benötigt. Fügen Sie zuerst die ID hinzu Name im HTML-Dokument, damit das entsprechende Element im Stilselektor gefunden werden kann. Der Unterschied besteht darin, dass der ID-Selektor der einzige Wert auf einer Seite ist vorheriges „.“-Zeichen (.className) und der ID-Selektor verwenden „#“ vor dem Namen, z. B. (#demo).<!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: 
Es gibt mehrere Stellen, die im ID-Selektor besondere Aufmerksamkeit erfordern:
Erstens: Ein ID-Selektor darf nur einmal in einem Dokument 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 kann derselbe ID-Name in verschiedenen Dokumenten verwendet werden, beispielsweise in „Test“. „#important“ ist für h1 in „html“ festgelegt, und die ID von p kann auch als „#important“ in „test1.html“ definiert werden. Voraussetzung ist jedoch, dass in test.html oder test1 nur eine ID zulässig ist .html Die Existenz von „#important“.
Wenn mehrere Elemente die gleichen Stilattribute haben, können sie eine Anweisung zusammen aufrufen und die Elemente durch Kommas trennen. 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>ID选择器</title>
<style>
#demo {
width: 200px;
height: 200px;
margin: 50px auto;
background: #FF0000;
}
</style>
</head>
<body>
<div id="demo">ID选择器</div>
</body>
</html>Rendering:
(Teilen von Lernvideos: CSS-Video-Tutorial
)Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten grundlegenden CSS3-Selektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!