Zu den häufig verwendeten gehören Tag-Selektoren, Klassen-Selektoren, ID-Selektoren usw. Tatsächlich gibt es noch viele weitere. Im folgenden Artikel werde ich die Typen und Verwendungszwecke dieser Selektoren im Detail vorstellen
Zuerst , lass uns über die Hauptselektoren sprechen
1. Tag-Selektor (wie zum Beispiel: body, p, p, ul, li)
2. Klassenselektor (wie zum Beispiel: class="head", class="head_logo" )
3. ID-Selektor (z. B. id="name", id="name_txt")
4. Globaler Selektor (z. B. * Nummer)
5. head .head_logo, beachten Sie, dass die beiden Selektoren durch die Leertaste getrennt sind)
6. Pseudoklasse Selektor (zum Beispiel: Es ist der Linkstil, Pseudoklasse eines Elements, 4 verschiedene Zustände: Link, besucht, aktiv, Hover.)
8. Attributselektoren für den String-Abgleich (^ $ * drei Typen, entsprechend Anfang, Ende und Einschluss)
Die Schreibweise von style=" " im Tag sollte eine Möglichkeit zur Einführung von CSS sein, kein Selektor, da der Selektor überhaupt nicht verwendet wird.
Sehen wir uns diese Selektoren separat an: 1: Tag-Namen-Selektor
Es gibt viele Tags in einem XHTML-Dokument, wie z. B. p-Tags, h1-Tags usw. Damit alle p-Tags im Dokument denselben CSS-Stil verwenden, sollten Sie den Tag-Selektor verwenden.
p {color:red;border:1px blue solid;}
p {color:#000;}Verwenden Sie den Tag-Selektor, um denselben CSS-Stil für dasselbe Tag im gesamten XHTML-Dokument anzugeben. In der tatsächlichen Anwendung wird jedoch dasselbe Tag im XHTML-Dokument wiederholt verwendet. Wenn Sie demselben Tag unterschiedliche CSS-Stile zuweisen möchten, sollten Sie Klassenselektoren verwenden.
<p class="test">测试代码</p>
.test {color:red;border:1px blue solid;}3: ID-Selektor
Der ID-Selektor ähnelt dem Klassenselektor. Der Unterschied besteht darin, dass der ID-Selektor nicht wiederverwendet werden kann. In einem XHTML-Dokument kann ein ID-Selektor seinen CSS-Stil nur einem Tag zuweisen.
<p id="test">测试代码</p>
#test {color:red;border:1px blue solid;}4. Globaler Selektor
Der globale Selektor ist ein Sternchen. Es funktioniert auf allen Elementen im XHTML-Dokument.
*{margin:0; padding:0;}Tag-Selektoren, Klassen-Selektoren und ID-Selektoren können in Kombination verwendet werden. Die allgemeine Kombinationsmethode ist die Kombination aus Tag-Selektor und Klassenselektor sowie die Kombination aus Tag-Selektor und ID-Selektor. Da die Prinzipien und Wirkungen dieser beiden Kombinationsmethoden gleich sind, wird nur die Kombination aus Tag-Selektor und Klassenselektor eingeführt. Der Kombinationsselektor ist nur eine Form der Kombination und kein echter Selektor, wird aber in der Praxis häufig verwendet.
Zum Beispiel .orderlist li {xxxx} oder .tableset td {}
Wenn wir es verwenden, wird es normalerweise in einigen Tags verwendet, die wiederholt erscheinen und denselben Stil haben, wie z. B. li td dd usw.
Zum Beispiel
.test1,span,test2 {border:1px blue solid;}
p,span,img {border:1px blue solid;}6. Geerbte Selektoren
Um den Umgang mit geerbten Selektoren zu erlernen, müssen Sie zunächst den Dokumentbaum und die CSS-Vererbung verstehen. Jedes XHTML kann als Dokumentbaum betrachtet werden. Die Wurzel des Dokumentbaums ist das HTML-Tag, und die Head- und Body-Tags sind seine untergeordneten Elemente. Die anderen Tags im Kopf und Körper sind die Enkelelemente des HTML-Tags. Das gesamte XHTML stellt eine baumartige Beziehung zwischen Vorfahren und Nachkommen dar. CSS-Vererbung bedeutet, dass Nachkommenelemente bestimmte Attribute von Vorfahrenelementen erben. Im Folgenden werden diese beiden wichtigen CSS-Konzepte anhand von Beispielen ausführlich erläutert.
Dokumentenbaum-CSS-Vererbungsselektor
<p class="test">
<span><img src="xxx" alt="示例图片"/></span>
</p>
.test span img {border:1px blue solid;}
p span img {border:1px blue solid;}后代选择器实际上是使用：多个选择器加上中间的空格来找到具体的要控制标签；从左往右，依次细化，最后锁定要控制的标签，如上例，先找到class为test的标签，再从他的子标签里查找span标签，再从span的子标签中找到IMG标签。
7.伪类选择器
伪类也是选择器的一种，但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。由于很多浏览器支持不同类型的伪类，没有一个统一的标准，所以很多伪类都不常被用到。伪类包括：:first-child、:link:、:visited、:hover、:active、:focus和:lang等等。其中有一组伪类是主流浏览器都支持的，就是超链接的伪类，包括:link:、:visited、:hover和:active。
a的这四个伪类，分别表示了a的四种状态，要注意的是，a可以只具有一种状态（:link），或者同时具有2种或者三种状态！比如说，任何一个有HREF属性的a标签，在未有任何操作时都已经具备了:link的条件，也就是满足了有链接属性这个条件；如果访问过的a标签，同时会具备 :link :visited 两种状态。把鼠标移到访问过的a标签上
8.字符串匹配的属性选择符--主要有三种
语法：E[att^="val"] ： {attribute}
说明：匹配具有att属性、且值以val开头的E元素。
<span style="font-size:18px;"><style type="text/css">
p[title^="val"] {color:#FF0000;}
</style>
<body>
<p style="width:733px; border: 1px solid #666; padding:5px;">
<p title="value">匹配具有att属性、且值以val开头的E元素</p>
</p></span>语法:E[att$="val"] ： {attribute}
说明：匹配具有att属性、且值以val结尾的E元素
<style type="text/css">
p[title$="val"] {font-weight:bold;}
</style>
<body>
<p style="width:733px; border: 1px solid #666; padding:5px;">
<p title="this is val">匹配具有att属性、且值以val结尾的E元素</p>
</p>
</body>语法:E[att*="val"] ： {attribute}
说明：匹配具有att属性、且值中包含val的E元素。
<style type="text/css">
p[title*="val"] {text-decoration:underline;}
</style>
<title>子串匹配的属性选择符 E[att*="val"]</title>
</head>
<body>
<p style="width:733px; border: 1px solid #666; padding:5px;">
<p title="have val word">匹配具有att属性、且值中含有val的E元素</p>
</p>
</body>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Das obige ist der detaillierte Inhalt vonEinführung in CSS-Selektortypen und deren Verwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
