Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt-CSS-Tutorial-php.cn

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

Der UI-Status-Pseudoklassenselektor wird verwendet, um UI-Elemente in einem bestimmten Status auszuwählen. Er wird hauptsächlich in HTML-Formularen verwendet, um das Benutzererlebnis zu verbessern.

Eigenschaften des UI-Status-Pseudoklassenselektors: Der angegebene Stil funktioniert nur in einem bestimmten Zustand.

Der Status des Formularelements umfasst Fokus gewinnen, Fokus verlieren, ausgewählt, nicht ausgewählt, verfügbar, nicht verfügbar, gültig, ungültig, Erforderlich, optional, schreibgeschützt usw.

E :geprüft33

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

Das laufende Ergebnis ist wie folgt:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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=&#39;&#39;>这是一个链接</a>
    <a href=&#39;&#39;>这是另一个链接</a>
</body>
</html>

Nach dem Login kopieren

运行结果如下图所示：

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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

Das laufende Ergebnis ist wie folgt:

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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 Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt 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

1Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

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

🎜🎜🎜🎜Standardauswahl 🎜🎜

<!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

🎜🎜🎜🎜🎜🎜9. Pseudoklassenselektor E::selection🎜🎜🎜🎜E:selection Pseudoklassenselektor wird verwendet Geben Sie an, wann das Element ist ausgewählt Der Stil des Staates. 🎜

<!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

🎜🎜🎜🎜🎜🎜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元素的样式。

<!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

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

1Ein Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt

各UI元素状态伪类选择器受浏览器的支持情况

Wählen Sie das ausgewählte Radio- oder Kontrollkästchenelement im Formular
	E:aktiviert	Wählen Sie die im Formular verfügbaren Elemente aus
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

选择器	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前端入门）

Das obige ist der detaillierte Inhalt vonEin Artikel, der den UI-Status-Pseudoklassenselektor in CSS ausführlich erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!