Heim > Artikel > Web-Frontend > Ausführliche Erklärung des CSS-Selektors Selector
Ausführliche Erklärung des CSS-Selektors Selector
- 小云云Original
- 2017-12-19 10:30:342199Durchsuche
Um mit CSS eine Eins-zu-Eins-, Eins-zu-Viele- oder Viele-zu-Eins-Steuerung von Elementen in einer HTML-Seite zu erreichen, müssen Sie CSS-Selektoren verwenden. Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert. In diesem Artikel werden hauptsächlich die relevanten Informationen zum CSS-Selektor in den CSS-Studiennotizen vorgestellt. Freunde, die sie benötigen, können darauf zurückgreifen.
Der in CSS1 definierte
Typselektor
wird verwendet, um Elemente eines bestimmten Typs auszuwählen (tatsächlich handelt es sich um einen HTML-Tag-Selektor). wie folgt:
body {
/*对 body 元素定义样式*/
}
body,p {
/*同时选择多种标签元素*/
}
ID-Selektor
wird verwendet, um das HTML-Element mit der angegebenen ID auszuwählen. Die übliche Verwendung ist wie folgt:
<p id="nav">
</p>
<style>
#nav {
/*定义 ID 为 nav 的元素的样式*/
}
</style>
Weil die Die Rendering-Reihenfolge von CSS erfolgt von rechts. Das Rendering erfolgt nach links und die ID ist völlig eindeutig, sodass der vorherige Typselektor weggelassen werden kann.
Klassenselektor
wird verwendet, um HTML-Elemente mit angegebenen Klassennamen auszuwählen:
<p class="nav">
</p>
<style>
.nav {
/*定义 class 为 nav 的元素的样式*/
}
</style>
Enthält Selektor
Wird verwendet, um hierarchisch verschachtelte Elemente auszuwählen:
<p class="nav">
<p class="nav-tools">
</p>
</p>
<p class="nav">
<p>
<p class="nav-tools">
</p>
</p>
</p>
<style>
.nav .nav-tools {
/*定义元素的父级元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
}
</style>
Es ist zu beachten, dass der Einschlussselektor sich nicht um die Ebene kümmert, solange der nachfolgende Selektor im enthalten ist vorheriges Element Das ist es. Wie im obigen Beispiel werden beide Navigationstools vom Selektor ausgewählt!
Pseudoklassenselektor
:link——Der Link-Pseudoklassenselektor
wird verwendet, um den Stil zu definieren, wenn der Link nicht besucht wird Die Methoden lauten wie folgt:
<p class="nav">
<p class="nav-tools">
<ul>
<li><a href="#"></a></li>
</ul>
</p>
</p>
<style>
a:link {
text-decoration: none;
color: blue;
}
</style>
:visited – der Link-Pseudoklassenselektor
wird verwendet, um den besuchten Linkstil zu definieren:
<style>
a:visited {
text-decoration: none;
color: red;
}
</style>
: aktiv – Der Pseudoklassenselektor für Benutzeroperationen
wird verwendet, um den aktivierten Elementstil zu definieren:
<style>
a:active {
text-decoration: none;
color: green;
}
</style>
:hover – Benutzer Operations-Pseudoklassenselektor
wird verwendet, um den Stil des Elements zu definieren, wenn die Maus darüber fährt:
<style>
a:hover {
text-decoration: none;
background-color: #F4F4F4;
}
</style>
:focus - Benutzeroperations-Pseudo-. Der Klassenselektor
wird zum Definieren des Fokus verwendet:
<style>
input:focus {
text-decoration: none;
background-color: #F4F4F4;
}
</style>
::first-line
wird zum Definieren verwendet Der Stil der ersten Textzeile im Element ist wie folgt:
<p class="doc">
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
</p>
<style>
.doc {
width: 360px;
}
.doc>p::first-line {
color: red;
}
</style>
::=first-letter
wird verwendet, um den Stil des ersten Zeichens darin zu definieren Das Element. Gängige Verwendungsmethoden sind wie folgt:
<style>
.doc {
width: 360px;
}
.doc>p::first-letter {
font-size: 2em;
color: red;
}
</style>
In CSS2 definierter Selektor
* – Der Platzhalterselektor
wird verwendet, um den allgemeinen Stil von zu definieren Alle Elemente im DOM sind wie folgt:
<p class="nav">
<p>
<p class="nav-tools">
</p>
</p>
</p>
<style>
.nav * {
margin: 0;
}
</style>
Wenn Sie den Standardstil zurücksetzen möchten, wird die Verwendung des Platzhalterselektors
[Attribut] nicht empfohlen. - Der Attributselektor
wird verwendet, um den Stil von Elementen zu definieren, die Attribute mit Attributen enthalten:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active>Menu</li>
<li>Index</li>
</ul>
</p>
</p>
</p>
<style>
li[active] {
color: red;
}
</style>
[attribute="value"]—. – Der Attributselektor
wird verwendet, um den Wert des Elementattributs als angegebenen Wertstil zu definieren:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active="active">Menu</li>
<li active>Index</li>
</ul>
</p>
</p>
</p>
<style>
li[active="active"] {
color: red;
}
</style>
[attribute~="value"]—— Der Attributselektor
wird verwendet, um Attribute zu definieren, die bestimmte Werte enthalten, und Attributwertelemente durch Leerzeichen zu trennen:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</p>
</p>
</p>
<style>
li[active~="active"] {
color: red;
}
</style>
Wie oben gezeigt, nur der Vordergrund Die Farbe des ersten Li wird als Rot definiert!
[attribute|="value"] - Der Attributselektor
wird zum Definieren von Attributwerten verwendet, die bestimmte Werte enthalten und durch Bindestriche (-) verknüpft sind wie folgt:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</p>
</p>
</p>
<style>
li[active|="active"] {
color: red;
}
</style>
Wie oben gezeigt: Nur die Vordergrundfarbe des zweiten Li wird als Rot definiert!
:first-child——struktureller Pseudoklassenselektor
wird verwendet, um den Stil des ersten Elements des Elements zu definieren:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</p>
</p>
</p>
<style>
li:first-child {
color: red;
}
</style> Hinweis: Das erste Kind wirkt auf das erste Element derselben Ebene und mit demselben Tag. Wie oben gezeigt, müssen Sie, wenn Sie den Stil des ersten li definieren möchten, li:first-child anstelle von ul:first-child!
:lang(en)
verwenden Um den Elementstil mit dem Attribut lang="en" zu definieren, lauten die üblichen Verwendungsmethoden wie folgt:
<p>
<p lang="en">Hello World</p>
</p>
<style>
p:lang(en) {
color: red;
}
</style>
::before
wird verwendet, um den Inhalt und Stil vor dem Element zu definieren. Übliche Verwendungsmethoden sind wie folgt:
<p>
<a>World</a>
</p>
<style>
a::before {
content: "Hello ";
}
</style>
::after
wird verwendet, um den Inhalt und Stil nach dem Element zu definieren:
<p>
<a>Hello</a>
</p>
<style>
a::after {
content: "World";
}
</style> p > p
wird verwendet, um den Stil des Unterelements der ersten Ebene eines Elements zu definieren. Die übliche Methode ist wie folgt:
<p class="nav">
<p>
<p class="nav-tools">
<ul>
<li active="test active">Menu</li>
<li active="active-test">Index</li>
</ul>
</p>
</p>
</p>
<style>
.nav-tools > ul {
background-color: red;
}
.nav-tools > li {
/*这个不会生效，因为 li 不是 ul 的直接子元素*/
}
</style>
h1 + p
wird verwendet, um den Stil von Elementen neben dem Element zu definieren: Die Verwendung ist wie folgt:
<p>
<h1>CSS</h1>
<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
</p>
<style>
h1 + p {
color: red;
}
</style>
CSS3 neuer Attributselektor
[foo^="bar"]
wird verwendet, um Elementattribute zu definieren, die mit bar beginnen. Der Stil des
<p>
<a href="http://www.betterde.com">Betterde Inc.</a>
<a href="https://www.betterde.com">Betterde Inc.</a>
</p>
<style>
a[href^="https"] {
color:green;
}
</style>
-Elements ist wie oben gezeigt, wobei https-Links grün markiert sind .
[foo$="bar"]
Wird verwendet, um den Stil von Elementen zu definieren, deren Elementattribute mit bar enden
<p>
<a href="http://www.betterde.com/logo.png">logo.png</a>
<a href="http://www.betterde.com/style.css">style.css</a>
<a href="http://www.betterde.com/main.js">main.js</a>
</p>
<style>
a[href$="png"] {
background: url(system/filetype/png.png) no-repeat left center;
padding-left: 18px;
}
a[href$="css"] {
background: url(system/filetype/css.png) no-repeat left center;
padding-left: 18px;
}
a[href$="js"] {
background: url(system/filetype/js.png) no-repeat left center;
padding-left: 18px;
}
</style>
Identifizieren Sie wie oben gezeigt die Hyperlinks Verlinkt Dateiformate und fügen Sie vorne ein Dateitypsymbol hinzu!
[foo*="bar"]
wird verwendet, um den Stil des Elements zu definieren, das bar im Elementattribut enthält. Es ist zu beachten, dass dies enthalten ist, was egal ist es ist eine Kombination, solange der Attributwert und die drei aufeinanderfolgenden Buchstaben von bar ausgewählt werden!
<p>
<h1 class="title big full-right"></h1>
<h2 class="title big full-right"></h1>
<h1 class="big-title"></h1>
</p>
<style>
a[class*="title"] {
color: red;
}
</style>
Wie oben gezeigt: Die drei Elemente in p werden alle in roter Schrift dargestellt!
Obwohl CSS3 immer noch die in CSS2 definierten Attributselektoren beibehält, wird empfohlen, stattdessen CSS3-Attributselektoren zu verwenden!
Struktur-Pseudoklassenselektor
:root
Wird verwendet, um den Stil von HTML-Tag-Elementen zu definieren
:nth-child(n)
Wird zur Definition des Stils von Unterelementen verwendet. n repräsentiert das Unterelement. n kann eine Zahl oder das Schlüsselwort ungerade, gerade oder eine Formel sein. Übliche Verwendungsmethoden sind wie folgt:
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:nth-child(even) {
background-color: red;
}
</style>
:nth-last-child(n)
与 :nth-child(n)用法相同，只是排序方式是从后往前！
:nth-of-type(n)
用于定义相同元素的第 n 个元素的样式，常见使用方法如下：
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:nth-of-type(even) {
background-color: red;
}
</style>
:nth-last-of-type(n)
与 :nth-of-type(n)用法相同，只是排序方式是从后往前！
:last-child
用于定义最后一个元素的样式，常见使用方法如下：
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:last-child {
background-color: red;
}
</style>
:first-of-type
定义第一个元素相同类型元素的样式，与 :nth-of-type(1) 效果一样
:last-of-type
定义最后一个元素相同类型元素的样式，常见使用方法如下：
<table>
<tbody>
<tr>
<td>name</td>
<td>gender</td>
<td>age</td>
</tr>
<tr>
<td>George</td>
<td>Male</td>
<td>23</td>
</tr>
<tr>
<td>Kevin</td>
<td>Male</td>
<td>28</td>
</tr>
<tr>
<td>Angule</td>
<td>Male</td>
<td>23</td>
</tr>
</tbody>
</table>
<style>
tr:last-of-type {
background-color: red;
}
</style>
:only-child
用于定义子元素只有一个且与制定元素标签相同，常见使用方法如下：
<p>
<h1>Hello</h1>
</p>
<style>
h1:only-child {
/*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
}
</style>
:only-of-type
用于定义只包含一个制定的标签元素的样式，常见使用方法如下：
<p>
<h1>Hello</h1>
</p>
<style>
h1:only-of-type {
/*如果 p 中还有其他任何元素，则h1不会按照该选择器中定义的样式渲染*/
}
</style>
:empty
用于定义，一个元素中没有包含任何子元素的样式，常见使用方法如下：
<p>
</p>
<style>
p:empty {
display: none;
}
</style>
CSS3 新增的其他选择器
E ~ F
用于定义兄弟元素的样式，常见使用方法如下：
<p>
<p>Hello</p>
</p>
<p>CSS</p>
<style>
p ~ p {
color: red;
}
</style>
p 元素中的 p 不会被渲染为红色字体，只有跟 p 是同级的 p 才会被渲染为红色！
:not(s)
用于定义指定元素，并且过滤 s 所指定的选择器元素，常见使用方法如下：
<p>
<p class="red">Hello</p>
<p class="blue">World</p>
<p>Welcome!</p>
</p>
<style>
p:not(.red) {
color: blue;
}
</style>
注意：s 是一个简单的结构选择器，不能使用复合选择器，该选择器只匹配第一个复合条件的元素。如上所示，最后一个 p 不会被渲染为蓝色！
:target
用于定义被访问的锚链样式，常见使用方法如下：
<p>
<p id="text-one">
<p>这是第一个文本段</p>
</p>
<p id="text-two">
<p>这是第二个文本段</p>
</p>
</p>
<style>
p:target {
color: red;
}
</style>
注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 p 内的元素字体会被渲染为红色！
CSS3 UI 元素状态伪类选择器
:enabled
用于定义元素的 enabled 时的样式，常见使用方式如下：
<p>
<input type="text">
</p>
<style>
input:enabled {
background: #ffff00;
}
</style>
注意：元素默认状态为 enabled
:disabled
用于定义元素处于禁用状态时的样式，常见使用方法如下：
<p>
<input type="text" disabled="disabled"/>
</p>
<style>
input:disabled {
background: #dddddd;
}
</style>
:checked
用于定义元素被选中时的样式，常见使用方式如下：
<p>
<form>
<input type="checkbox" />
</form>
</p>
<style>
input:checked {
color: green;
}
</style>
相关推荐：
Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des CSS-Selektors Selector. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!