Einführung in CSS-Selektortypen und deren Verwendung

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;}

2: Klassenselektor

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;}

Im HTML-Dokument fügen wir class="xxx" zum Eröffnungs-Tag des Tags hinzu, um den Stil zu steuern (nicht gepaarte Tags wie Eingabe werden direkt im Tag platziert) und im entsprechenden In der CSS-Datei der Seite können Sie mit .xxx auf dieses Tag verweisen, um dieses Tag zu steuern. Wir nennen diese Methode zum Suchen von Tags durch Definieren von Klassen: Klassenselektoren.

Diese Art der Klassendefinition ist der am häufigsten verwendete Selektor in der Front-End-Entwicklung. Sie verfügt über mehrere herausragende Funktionen: Sie können dieselbe Klasse für verschiedene Tags festlegen und so mehrere Tags mit einem einzigen CSS-Befehl steuern Ein Großteil des Codes besteht darin, dass die Seite einfach zu ändern, leicht zu warten und leicht zu überarbeiten ist. Zweitens verwendet das Hintergrundpersonal nicht die relevanten Einstellungen der Klasse und es besteht keine Notwendigkeit, mit dem Hintergrundpersonal zu interagieren. Darüber hinaus kann die Beschriftung dynamisch über js usw. geändert werden. Klassenname, wodurch der Stil der gesamten Beschriftung geändert wird und die Implementierung dynamischer Front-End-Effekte einfacher wird.

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;}

HTML-Elemente mit IDs können von JavaScript manipuliert werden. IDs werden auch häufig von Back-End-Entwicklern verwendet, daher sollten Front-End-Entwickler sie so wenig wie möglich verwenden.

4. Globaler Selektor
Der globale Selektor ist ein Sternchen. Es funktioniert auf allen Elementen im XHTML-Dokument.

*{margin:0; padding:0;}

5. Kombinierte Selektoren

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

H1.red {color: red}
Gruppenselektor

.test1,span,test2 {border:1px blue solid;} 
p,span,img {border:1px blue solid;}

Der Gruppenselektor ist eigentlich eine vereinfachte CSS-Methode Beim Schreiben werden lediglich verschiedene Selektoren mit derselben Definition zusammengefügt, wodurch eine Menge Code gespart wird.

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中文网！

相关推荐：

关于CSS background的使用方法

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!