| E:deaktiviert |
In der Auswahl nicht verfügbar (d. h. deaktiviert). Formular) Elemente |
3 |
| E:gültig |
Wählen Sie Elemente aus, deren im Formular ausgefüllter Inhalt den Anforderungen entspricht |
3 |
| E:ungültig |
Wählen Sie Elemente aus, deren im Formular ausgefüllter Inhalt nicht den Anforderungen entspricht Anforderungen, wie z. B. ungültige URL oder E-Mail, oder entspricht nicht dem durch das Musterattribut angegebenen Muster 3 |
| E:optional |
Das erforderliche Attribut ist im Auswahlformular zulässig und die Elemente, die nicht als erforderlich angegeben sind |
3 |
| E:schreibgeschützt |
Die Elemente im Auswahlformular, deren Status „Lesen“ ist nur |
3 |
| E:Lesen/Schreiben |
Wählen Sie Elemente im Formular aus, die nicht schreibgeschützt sind. |
3 |
| E:Standard |
Wählen Sie Optionsfelder oder Kontrollkästchen aus, die sich im ausgewählten Zustand befinden Standardmäßig ist der ausgewählte Status des Optionsfeld- oder Kontrollkästchen-Steuerelements auf den nicht ausgewählten Status festgelegt, auch wenn der Benutzer dies tun wird, und der im E:Standardselektor angegebene Stil ist weiterhin gültig |
3 |
| E: unbestimmt |
Eine Gruppe von Optionsfeldern im Auswahlformular. Der Stil des gesamten Satzes von Optionsfeldern, wenn im Feld kein Optionsfeld ausgewählt ist. Wenn der Benutzer eines der Optionsfelder auswählt, ist der Stil nicht spezifiziert 3 |
|
1. E:Hover-Selektor
wird verwendet, um den Stil anzugeben, den das Element verwendet, wenn der Mauszeiger darüber bewegt wird
Anwendung:
<元素>:hover{
CSS样式
}Wir können es in „“ hinzufügen Das Typattribut des Elements.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>Das laufende Ergebnis ist wie folgt:
2. E:aktiver Selektor
:aktiv: Definieren Sie den Stil, wenn Sie auf den Link klicken. :active：定义点击链接时的样式。
通过:active伪类选择器可以定义点击链接时的样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px solid red;
color: red;
}
a:hover {
background: #9c6ae1;
border: 1px solid black;
color: black;
}
a:active {
background: #000;
border: 1px solid black;
color: white;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
3、E:link选择器
:link：定义普通或未访问链接的样式；
通过:link伪类选择器可以为普通或未访问的链接设置样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
4、E:visited选择器
:visited：定义已经访问过链接的样式；
通过:visited伪类选择器可以为已经访问过的链接设置样式，示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
a {
text-decoration: none;
}
a:link {
font-size: 18px;
border: 1px solid black;
padding: 5px;
margin-left: 10px;
background: #ccc;
color: black;
}
a:visited {
background: #FFFF99;
border: 1px soild red;
color: red;
}
</style>
</head>
<body>
<a href=''>这是一个链接</a>
<a href=''>这是另一个链接</a>
</body>
</html>运行结果如下图所示：
5、E:focus选择器
:focus
Sie können den Stil beim Klicken auf einen Link über den Pseudoklassenselektor :active definieren. Der Beispielcode lautet wie folgt:
nbsp;html>
<meta>
<title>选择器E:hover、E:active和E:focus</title>
<style>
input[type="text"]:hover{
background: green;
}
input[type="text"]:focus{
background: #ff6600;
color: #fff;
}
input[type="text"]:active{
background: blue;
}
input[type="password"]:hover{
background: red;
}
</style>
<h1>选择器E:hover、E:active和E:focus</h1>
Das laufende Ergebnis ist wie folgt:
3. E:link selector:link: Definieren Sie den Stil für normale oder nicht besuchte Links.
Sie können den Stil für normale oder nicht besuchte Links festlegen Für den :link-Pseudoklassenselektor lautet der Beispielcode wie folgt:
nbsp;html>
<meta>
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
Das laufende Ergebnis ist wie folgt: 
4. E: besuchte Selektor
:visited: Definieren Sie den Stil des besuchten Links
Sie können den Stil für den besuchten Link über den :visitedfestlegen > Pseudoklassenselektor. Der Beispielcode lautet wie folgt:
nbsp;html>
<meta>
<title>read-only伪类选择器与E:read-write伪类选择器</title>
<style>
input[type="text"]:read-only{
background: #000;
color: green;
}
input[type="text"]:read-write{
color: #ff6600;
}
</style>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
Das laufende Ergebnis ist wie folgt: 
5. E:Fokusauswahl
:focus: Wird zur Angabe des Stils verwendet Wird vom Element verwendet, um den Cursorfokus zu erhalten
Der Beispielcode lautet wie folgt:
nbsp;html>
<meta>
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
<h1>checked伪类选择器</h1>
6. E:aktivierter Pseudoklassenselektor und E:deaktivierter Pseudoklassenselektor
1) Der E:enabled-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element im verfügbaren Status befindet.
2) Der E:disabled-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element in einem deaktivierten Zustand befindet.
nbsp;html>
<meta>
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
<h1>default伪类选择器</h1>
7. E:schreibgeschützter Pseudoklassenselektor und E:schreibgeschützter Pseudoklassenselektor
1), E:schreibgeschützter Selektor wird verwendet, um anzugeben, wann das Element ist Der Stil im schreibgeschützten Zustand. 2) Der E:read-write-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element in einem nicht schreibgeschützten Zustand befindet. nbsp;html>
<meta>
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
<h1>indeterminate伪类选择器</h1>
8, Pseudoklassenselektoren E:checked, E:default and indeterminate
1), E:cehcked Pseudoklassenselektor wird verwendet, um das Optionsfeld oder das Kontrollkästchen im Formular anzugeben Der Stil des Kontrollkästchens, wenn es ausgewählt ist. 2) Der E:default-Selektor wird verwendet, um den Stil des Optionsfelds oder Kontrollkästchens festzulegen, das beim Öffnen der Seite standardmäßig ausgewählt ist. 3) Der unbestimmte Selektor E: wird verwendet, um den Stil der gesamten Gruppe von Optionsfeldern anzugeben, wenn beim Öffnen der Seite kein einzelnes Optionsfeld in einer Gruppe von Optionsfeldern auf den ausgewählten Status gesetzt ist.
nbsp;html>
<meta>
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
<h1>伪类选择器E::selection</h1>
<input>
🎜🎜🎜🎜Standardauswahl 🎜🎜nbsp;html>
<meta>
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
🎜🎜🎜nbsp;html>
<meta>
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
🎜🎜🎜🎜🎜🎜9. Pseudoklassenselektor E::selection🎜🎜🎜🎜E:selection Pseudoklassenselektor wird verwendet Geben Sie an, wann das Element ist ausgewählt Der Stil des Staates. 🎜nbsp;html>
<meta>
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>
🎜🎜🎜🎜🎜🎜10. E:ungültiger Pseudoklassenselektor und E:gültiger Pseudoklassenselektor🎜🎜🎜🎜1), E:ungültiger Pseudoklassenselektor wird verwendet, um anzugeben, wann der Elementinhalt nicht verwendet werden kann über HTML5 Die durch Attribute wie „require“ des Elements oder den Stil angegebene Prüfung, wenn der Elementinhalt nicht dem vom Element angegebenen Format entspricht. 🎜 2) Der Pseudoklassenselektor E:valid wird verwendet, um den Stil anzugeben, wenn der Elementinhalt die von HTML5 festgelegte Prüfung bestehen kann, indem Attribute wie „required“ des Elements verwendet werden oder der Elementinhalt dem vom Element angegebenen Format entspricht . 🎜rrreee🎜🎜🎜11. E:erforderlicher Pseudoklassenselektor und E:optionaler Pseudoklassenselektor🎜🎜🎜1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
nbsp;html>
<meta>
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
nbsp;html>
<meta>
<title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
<style>
input[type="number"]:in-range{
color: #ffffff;
background: green;
}
input[type="number"]:out-of-range{
background: red;
color: #ffffff;
}
</style>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input>
各UI元素状态伪类选择器受浏览器的支持情况
| 选择器 |
Firefox |
Safari |
Opera |
IE8 |
Chrome |
| E:hover |
√ |
√ |
√ |
√ |
√ |
| E:active |
√ |
√ |
√ |
x |
√ |
| E:focus |
√ |
√ |
√ |
√ |
√ |
| E:enable |
√ |
√ |
√ |
x |
√ |
| E:disable |
√ |
√ |
√ |
x |
√ |
| E:read-only |
√ |
x |
√ |
x |
x |
| E:read-write |
√ |
x |
√ |
x |
x |
| E:checked |
√ |
√ |
√ |
x |
√ |
| E:default |
√ |
x |
x |
x |
x |
| E:indeterminate |
√ |
√ |
x |
√ |
√ |
| E:selection |
√ |
√ |
√ |
x |
√ |
（学习视频分享：web前端入门）
