Heim >Web-Frontend >CSS-Tutorial >Analyse des CSS3-UI-Elementstatus-Pseudoklassenselektors
Analyse des CSS3-UI-Elementstatus-Pseudoklassenselektors
- 不言Original
- 2018-06-14 16:30:241615Durchsuche
In diesem Artikel werden hauptsächlich Pseudoklassenselektoren für den CSS3-UI-Elementstatus vorgestellt, einschließlich Hover, Aktiv und Fokus, aktiviert, deaktiviert, schreibgeschützt und Lese-/Schreibzugriff usw. Freunde in Not können darauf verweisen
Die sogenannter UI-Selektor: Der angegebene Stil funktioniert nur, wenn sich das Element in einem bestimmten Zustand befindet, und funktioniert nicht im Standardzustand!
Browserkompatibilität:
E:hover Unterstützt Firefox, Safari, Opera, IE8, Chrome ------------
E:active Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E : Fokus Opera, --------- ---E:schreibgeschützt. Unterstützt Firefox, Opera. Unterstützt IE8, Safari, nicht. chrome
E:read-write Unterstützt Firefox, Opera unterstützt IE8, Safari, Chrome nicht
E :checked Unterstützt Firefox, Safari, Opera und Chrome Unterstützt ie8 nicht
E::selection Unterstützt Firefox , Safari, Opera und Chrome Unterstützt ie8 nicht
E:default Unterstützt nur Firefox ---------- --
E:indeterminate Unterstützt nur Chrome Unterstützt ie8 nicht
E: gültig Unterstützt Firefox und Safari, Opera, Chrome unterstützt IE8 nicht
E: Erforderlich unterstützt Firefox, Safari, Opera, Chrome unterstützt IE8 nicht
E: Optional unterstützt Firefox, Safari, Opera, Chrome unterstützt IE8 nicht
E: In-Ranger-Unterstützung unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E: Out-of-Ranger Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
Das Folgende ist eine detaillierte Erklärung seiner Verwendung;
1. Selektoren E:hover, E:active und E:focus
1). Der vom Element verwendete Stil, wenn das Element aktiviert ist
Verwendung:
558dc77cf99fee6757323747f07fa144:hover{
CSS-Stil
}
Wir können den verwenden „cbc0c9b0b64514ead058e93407459a40“, um das Typattribut des Elements hinzuzufügen.
Beispiel:
input[type="text"]:hover{
CSS-Stil
🎜> 2). Der E:active-Selektor wird verwendet, um den Stil anzugeben, der verwendet wird, wenn das Element verwendet wird aktiviert.
3) Der E:focus-Selektor wird verwendet, um den Stil anzugeben, den das Element verwendet, um den Cursor-Fokus zu erhalten.
<!DOCTYPE html>
<html>
<head lang="en">
<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>
2. E:aktivierter Pseudoklassenselektor und E:deaktivierter Pseudoklassenselektor 1) , Der E:enabled-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element in einem aktivierten Zustand 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 lang="en">
<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>
3 🎜 > 1). Der E:read-only-Selektor wird verwendet, um den Stil anzugeben, wenn sich das Element im schreibgeschützten Zustand befindet.
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 lang="en">
<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>
1). Geben Sie den aktuellen Stil des Optionsfelds oder Kontrollkästchens im Formular an, wenn es ausgewählt ist. 2) Der E:default-Selektor wird verwendet, um den Stil des Optionsfelds oder Kontrollkästchens festzulegen, das sich beim Öffnen der Seite standardmäßig im ausgewählten Zustand befindet. 3) Der unbestimmte Selektor E: wird verwendet, um den Stil der gesamten Gruppe von Optionsfeldern festzulegen, wenn beim Öffnen der Seite kein einzelnes Optionsfeld in einer Gruppe von Optionsfeldern auf den ausgewählten Status gesetzt ist.
<!DOCTYPE html>
<html>
<head lang="en">
<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>Standardauswahl
<!DOCTYPE html>
<html>
<head lang="en">
<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><h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate伪类选择器</h1><!DOCTYPE html>
<html>
<head lang="en">
<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>
5. Pseudo-Klassenselektor E::selection 1), E:selection Pseudo-Klassenselektoren sind Wird verwendet, um Stile anzugeben, wenn ein Element ausgewählt ist. Zum Beispiel
<!DOCTYPE html>
<html>
<head lang="en">
<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>
<p>今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！今天，开发搜索框，出现了bug，现在没有找到原因！</p>
<input type="text" placeholder="文本">
</body>
</html>
6. E:ungültiger Pseudoklassenselektor und E:gültiger Pseudoklassenselektor 1), E Der Pseudoklassenselektor :invalid wird verwendet, um den Stil anzugeben, wenn der Elementinhalt die von HTML5 mithilfe von Attributen wie „required“ des Elements festgelegte Prüfung nicht bestehen kann oder 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 wenn der Elementinhalt dem angegebenen Format entspricht durch das Element.
Zum Beispiel
<!DOCTYPE html>
<html>
<head lang="en">
<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>
7. E Der Pseudoklassenselektor :required wird verwendet, um die Stile von Eingabeelementen, Auswahlelementen und Textbereichselementen anzugeben, die das erforderliche Attribut verwenden dürfen und über das angegebene erforderliche Attribut verfügen. 2) Der Pseudoklassenselektor E:optional wird verwendet, um den Stil von Eingabeelementen anzugeben, Elemente und Textbereichselemente auszuwählen, die das erforderliche Attribut verwenden dürfen und das erforderliche Attribut nicht angegeben ist. <!DOCTYPE html>
<html>
<head lang="en">
<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>8. E: Pseudoklassenselektor im Bereich und E: Pseudoklassenselektor außerhalb des Bereichs
2) Der Pseudoklassenselektor E:out-of-range wird verwendet, um den zu verwendenden Stil anzugeben, wenn der effektive Wert des Elements auf einen Bereich beschränkt ist, der tatsächliche Eingabewert diesen jedoch überschreitet. Zum Beispiel<!DOCTYPE html>
<html>
<head lang="en">
<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>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
Analyse zum Unterschied zwischen der Verwendung von RGBA und Opazität zum Festlegen der Transparenz in CSS
Das obige ist der detaillierte Inhalt vonAnalyse des CSS3-UI-Elementstatus-Pseudoklassenselektors. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!