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.
| 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;} |
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>结果图
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>结果图
注意：标签选择器是指给指定的标签设置样式。
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>结果图
现在大家应该知道了p标签为什么没有改变了，因为标签选择器的作用是给指定的标签设置样式的，接下来笔者将p标签的字体颜色设置为红色。
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>结果图
.box，来完成HTML页面中的h1标签和p标签中的字体颜色设置为红色。HTML页面中的第一个h1标签字体颜色设置为红色。代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.box {
color: red;
}
</style>
</head>
<body>
<h1 class="box">成功不是击败别人，而是改变自己。</h1>
<h1>PHP中文网</h1>
<p>PHP中文网</p>
</body>
</html>结果图
注意：只要是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属性值为#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元素的字体颜色，设置为红色。
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>结合元素选择器</title>
<style>
h2.box {
color: red;
}
</style>
</head>
<body>
<h2 class="box">成功不是击败别人，而是改变自己。</h2>
<span class="box">成功不是击败别人，而是改变自己。</span>
</body>
</html>结果图
注意：结合元素选取器执行原理说明如下：首先是先找到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
🎜
Die Schriftart Die Farbe im <code>h1-Tag und im p-Tag in der HTML-Seite ist auf Rot gesetzt. 🎜🎜🎜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
🎜🎜🎜.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?"/>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. 🎜🎜🎜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. 🎜🎜🎜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!
