| 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样式
}Nach dem Login kopieren
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>Nach dem Login kopieren
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>Nach dem Login kopieren
运行结果如下图所示：
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>Nach dem Login kopieren
运行结果如下图所示：
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>Nach dem Login kopieren
运行结果如下图所示：
5、E:focus选择器
:focus
Sie können den Stil beim Klicken auf einen Link über den Pseudoklassenselektor :active definieren. Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名">
<br />
<br />
密码：<input type="password" placeholder="请输入密码"></form>
</body>
</html>Nach dem Login kopieren
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:enabled伪类选择器与E:disabled伪类选择器</title>
<style>
input[type="text"]:enabled{
background: green;
color: #ffffff;
}
input[type="text"]:disabled{
background: #727272;
}
</style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" disabled>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>Nach dem Login kopieren
4. E: besuchte Selektor
:visited: Definieren Sie den Stil des besuchten Links
Sie können den Stil für den besuchten Link über den :visited</code festlegen > Pseudoklassenselektor. Der Beispielcode lautet wie folgt: <br/> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" value="winson" readonly>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html></pre><div class="contentsignin">Nach dem Login kopieren</div></div></p>Das laufende Ergebnis ist wie folgt: <p><img src="https://img.php.cn/upload/image/950/708/406/165949913875271Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" title="165949913875271Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" alt="Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt"/><img src="https://img.php.cn/upload/image/358/879/819 /165949880722497Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" title="165949880722497Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt" alt=" Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt"/></p><p><strong><span style="max-width:90%">5. E:Fokusauswahl</span></strong></p><p><code>:focus: Wird zur Angabe des Stils verwendet Wird vom Element verwendet, um den Cursorfokus zu erhalten
Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checked伪类选择器</title>
<style>
input[type="checkbox"]:checked{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
房屋状态： <input type="checkbox">水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>Nach dem Login kopieren
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. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>default伪类选择器</title>
<style>
input[type="checkbox"]:default{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
房屋状态： <input type="checkbox" checked>水 <input type="checkbox">电 <input type="checkbox">天然气 <input type="checkbox">宽带</form>
</body>
</html>Nach dem Login kopieren
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. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>indeterminate伪类选择器</title>
<style>
input[type="radio"]:indeterminate{
outline: 2px solid green;
}
</style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
性别： <input type="radio">男 <input type="radio">女</form>
</body>
</html>Nach dem Login kopieren
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器E::selection</title>
<style>
::selection{
background: green;
color: #ffffff;
}
input[type="text"]::selection{
background: #ff6600;
color: #ffffff;
}
</style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<input type="text" placeholder="文本">
</body>
</html>Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:invalid伪类选择器与E:valid伪类选择器</title>
<style>
input[type="email"]:invalid{
color: red;
}
input[type="email"]:valid{
color: green;
}
</style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
<input type="email" placeholder="请输入邮箱"></form>
</body>
</html>Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>Nach dem Login kopieren
Nach dem Login kopieren
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>Nach dem Login kopieren
Nach dem Login kopieren
1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>E:required伪类选择器与E:optional伪类选择器</title>
<style>
input[type="text"]:required{
background: red;
color: #ffffff;
}
input[type="text"]:optional{
background: green;
color: #ffffff;
}
</style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
姓名：<input type="text" placeholder="请输入姓名" required>
<br />
<br />
学校：<input type="text" placeholder="请输入学校"></form>
</body>
</html>Nach dem Login kopieren
Nach dem Login kopieren
12、E:in-range伪类选择器与E:out-of-range伪类选择器
1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1><input type="number" min="0" max="100" value="0">
</body>
</html>Nach dem Login kopieren
Nach dem Login kopieren
各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前端入门）
