Dieser Artikel führt Sie durch die fünf grundlegenden Selektoren von CSS: Elementselektor, Klassenselektor, ID-Selektor, Platzhalterselektor, Attributselektor und spricht über die Priorität dieser grundlegenden Selektoren. Ich hoffe, dass er für alle hilfreich ist.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Was ist ein Selektor? Die Funktion eines CSS-Selektors besteht darin, ein oder mehrere Elemente einer HTML-Seite gemäß CSS-Regeln zu positionieren. Wenn der Browser die HTML-Seite analysiert, findet er die Elemente der HTML-Seite basierend auf den Selektoren in den CSS-Regeln und legt Stile für die entsprechenden Elemente fest. [Empfohlenes Lernen: CSS-Video-Tutorial]
Als Rückgrat von CSS funktioniert der CSS-Selektor wie die menschliche Wirbelsäule, abhängig und interaktiv mit der THML-Struktur, dem Browserverhalten und dem Benutzerverhalten, was zum CSS-Selektor führt Ist ein sehr wichtiger Teil. Der „Selektor“ bezieht sich hier auf die Tags, Klassennamen usw. vor den häufig verwendeten CSS-Deklarationsblöcken. Wie im folgenden Code gezeigt:
div {
color: lightcoral;
font-size: 24px;
}Das div hier ist ein Selektor.
Klassifizierung von SelektorenCSS hat sich von der ersten zur dritten Version weiterentwickelt, was dazu führte, dass die Arten von CSS-Selektoren immer komplexer wurden. Derzeit ist die Klassifizierung von CSS-Selektoren wie folgt:
Grundlegende Selektoren: Es gibt 5 grundlegende Selektoren, die die grundlegendste Verwendung von CSS-Selektoren darstellen.
Ebenenselektor: Es gibt 4 Ebenenselektoren, die HTML-Elemente basierend auf der Beziehung zwischen HTML-Elementen finden.
Kombinierter Selektor: Es gibt zwei Verwendungszwecke: Schnittmenge und Vereinigung. Es ist eine Kombination aus dem vorherigen Basisselektor und dem hierarchischen Selektor.
Pseudoklassenselektor: ermöglicht die Auswahl von HTML-Elementen mit Statusinformationen, die nicht in der HTML-Seite enthalten sind.
Pseudo-Element-Selektor: Suchen Sie alle Entitäten, die kein HTML enthalten.
Lassen Sie sich nun zunächst durch die grundlegenden Selektoren führen. Weitere Selektoren werden später vorgestellt.
| Beschreibung | ||
|---|---|---|
| p {Farbe:rot;} Wählen Sie alle< ;p>-Elemente aus. | Klassenselektor | |
| Alle Tag-Elemente mit class='mystyle' auswählen | id-Selektor | |
| Alle Tag-Elemente auswählen mit id="myid" | Universeller Selektor/Wildcard-Selektor | |
| *myid {Farbe:rot;}Alle Elemente auswählen | Attribute-Selektor | |
| Wählen Sie alle ID-Attributelemente aus | 1、元素选择器 元素选择器 又称为 类型选择器，这种基本选择器是通过HTML页面的元素名定位具体HTML元素。如果类型选择器单独使用的话，会定位当前HTML页面中所有该元素名的元素。 语法结构如下所示： 元素名 {
属性 : 属性值;
}Nach dem Login kopieren 值得注意是 类型选择器的元素名是不区分大小写的。 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类型选择器</title>
<style>
/* 选择标签名为 h1 的元素，设置字体的颜色为红色 */
h1 {
color: lightcoral;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示： 2、类选择器 类选择器 是通过HTML元素的 语法结构如下所示： .类名 {
属性 : 属性值;
}Nach dem Login kopieren 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
/* 设置所有带有 title 类名的元素 */
.title {
color: lightsalmon;
}
</style>
</head>
<body>
<!-- 为 h1 h2 h3 元素增加一个 title 的类名，可以通过类选择器统一控制 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>二级标题</h3>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示：
在HTML中可以为一个元素添加多个类名，示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
.title {
color: lightsalmon;
}
/* 任意选择一个类名设置即可 */
.h3 {
color: lawngreen;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<!-- 多个类型通过空格进行分割 -->
<h3 class="title h3">二级标题</h3>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示：
3、ID选择器 ID选择器 和类选择器 类似，都是根据某个属性来匹配HTML元素的，类选择器匹配的是 语法结构如下： #ID {
属性 : 属性值;
}Nach dem Login kopieren 用法与类选择器类似，这里不做赘述。只需要注意 一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。 即元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！ 示例： #div1{
background:rgb(200,200,0);
color:blue;
font-size:20px;
}Nach dem Login kopieren 运行结果 <p>这是一个段落</p> <p id="div1">这是一个段落</p> Nach dem Login kopieren
4、通用选择器 通用选择器 又称为通配符选择器 ，是一个星号（ 语法结构如下所示： * {
属性 : 属性值;
}Nach dem Login kopieren 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: lightskyblue;
}
/* 由于通配符选择器的优先级最低，可以随意覆盖 */
p {
color: #333;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>段落文本</p>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示： 5、属性选择器 属性选择器 是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中 CSS中的属性选择器还可以分为两种，如下所示
接下来我们将分别讨论这两类属性选择器 属性值直接匹配选择器 属性值直接匹配选择器还可以分为4种，如下所示：
语法结构如下所示： [attr] {
属性 : 属性值;
}Nach dem Login kopieren 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选中所有id属性 */
[id] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示：
语法结构如下所示： [attr=value] {
属性 : 属性值;
}Nach dem Login kopieren 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 选择 id 属性为 title1 的元素 */
[id=title1] {
color: cornflowerblue;
}
</style>
</head>
<body>
<h1 id="title1">白月初</h1>
<h1 id="title2">东方月初</h1>
<h1 id="title3">涂山苏苏</h1>
<h1 id="title4">涂山红红</h1>
<h1 id="title5">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示：
示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配所有id属性中包含 name4 的元素 */
[class~=name4] {
color: cornflowerblue;
}
/* [class |="name"] 会选择 class 属性以属性值为 name 或者 name-开头的属性 */
[class |="name"] {
color: lawngreen;
}
</style>
</head>
<body>
<h1 id="title1" class="name-1 title ">白月初</h1>
<h1 id="title2" class="name2 title ">东方月初</h1>
<h1 id="title3" class="name-3 title ">涂山苏苏</h1>
<h1 id="title4" class="name4 title ">涂山红红</h1>
<h1 id="title5" class="name-5 title ">涂山雅雅</h1>
<h1 id="title6">王权富贵</h1>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示： 属性值正则匹配选择器属性值正则匹配选择器还可以分为3种，如下所示：
语法结构如下所示： [attr^=value] {
属性 : 属性值;
}
[attr$=value] {
属性 : 属性值;
}
[attr*=value] {
属性 : 属性值;
}Nach dem Login kopieren 示例代码如下： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器</title>
<style>
/* 匹配以 name 开头的元素，设置字体颜色为蓝色 */
[class ^=name] {
color: blue;
}
/* 匹配以 human 结尾的元素，设置字体大小为 2.6rem */
[class $=human] {
font-size: 2.6rem;
}
/* 匹配包含 em 的元素，设置字体颜色为红色 */
[class *=em] {
color: red;
}
</style>
</head>
<body>
<h1 class="name human">白月初</h1>
<h1 class="name human">东方月初</h1>
<h1 class="name demon">涂山苏苏</h1>
<h1 class="name demon">涂山红红</h1>
<h1 class="name demon">涂山雅雅</h1>
<h1 class="name human">王权富贵</h1>
</body>
</html>Nach dem Login kopieren 代码运行结果如下图所示： 选择器优先级问题引入
浏览器根据css样式渲染某一个元素时，会遵循一定的规则，一般来说有以下的优先级规则，我们将其量化为特异性值。 CSS选择器的优先级别有着严格的规定，我们可以将其划分为0~5这6个级别，在这6个级别中，前4个的等级由CSS选择器决定，后两个等级由我们书写的形式和特性语法决定。具体如下所示
* {
color: #000;
}Nach dem Login kopieren
下面我们来看一个例子 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这是一个demo</title>
<style>
#myid{color:red;}
.myclass1{color:yellow;}
h1,p {color:green;}
</style>
<body>
<h1 style="color: blue;" id="myid">这是一个标题，请查看优先级</h1>
<p id="myid">这是一个段落，请查看优先级</p>
</body>
</head>
</html>Nach dem Login kopieren 我们可以看到因为标签 有行内样式，所以它显示为了蓝色；而标签 虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色 (Lernvideo-Sharing: Erste Schritte mit dem Web-Frontend) Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der grundlegenden Selektoren in CSS und Diskussion über die Selektorpriorität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Vorheriger Artikel：Detaillierte Erläuterung der CSS-Positionierung – relative Positionierung, absolute Positionierung und feste Positionierung
Nächster Artikel：CSS-Layouteigenschaften steuern das Ausblenden und Anzeigen von Elementen
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
|
下图展示了类选择器的分析结构：
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
