Heim > Artikel > Web-Frontend > Detaillierte Erläuterung von Beispielen für Pseudoklassenselektoren für den UI-Elementstatus in CSS3

Detaillierte Erläuterung von Beispielen für Pseudoklassenselektoren für den UI-Elementstatus in CSS3

巴扎黑Original: 2017-08-12 14:45:541403Durchsuche

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:focus Unterstützt Firefox, Safari, Opera, ie8, chrome -------------
E:enabled Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E:disabled Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E:read-only Unterstützt Firefox, Opera Unterstützt IE8, Safari, Chrome nicht
E:read- write Unterstützt Firefox, Opera unterstützt IE8, Safari, Chrome nicht
E:checked Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E::selection Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E: Standard              只支持 Firefox                                                        ------------
E: unbestimmt    只支持chrome                                                     ------------
E:invalid               支持 Firefox 、 Safari、Opera、 Chrome Unterstützt IE8 nicht
E:gültig Unterstützt Firefox, 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-range Unterstützt Firefox, Safari, Opera, Chrome Unterstützt IE8 nicht
E:out-of-range Unterstützt Firefox, Safari, Opera , chrome             ie8 wird nicht unterstützt
Hier finden Sie detaillierte Anweisungen zur 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.

Zum Beispiel:

<!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 im verfügbaren Zustand befindet.
2). Der Selektor E:disabled wird verwendet, um den Stil anzugeben, wenn sich das Element in einem deaktivierten Zustand befindet.

Zum Beispiel:

<!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. read-write Pseudoklassenselektor
1), E:Nur-Lese-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>

4. Pseudoklassenselektoren E:checked, E:default und indeterminate 1) , Der Pseudoklassenselektor E:cehcked wird verwendet, um den Stil anzugeben, wenn sich das Optionsfeld oder Kontrollkästchen im Formular im ausgewählten Zustand befindet.
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. Pseudoklassenselektor E::selection 1). Der Pseudoklassenselektor E:selection wird verwendet, um den Stil anzugeben, wenn das Element ausgewählt wird.

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>

E:ungültiger Pseudoklassenselektor und E:gültiger Pseudoklassenselektor 1) Der Pseudoklassenselektor E:invalid wird verwendet, um anzugeben, wann der Elementinhalt die von HTML5 festgelegte Prüfung nicht bestehen kann, indem Attribute wie „required“ des Elements verwendet werden oder der Elementinhalt nicht konform ist an das durch das Element angegebene Format.
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>

E:erforderlicher Pseudoklassenselektor und E:optionaler Pseudoklassenselektor 1) Der Pseudoklassenselektor E:required wird verwendet, um die Stile von Eingabeelementen, Auswahlelementen und Textbereichselementen anzugeben, die das erforderliche Attribut verwenden dürfen und das erforderliche Attribut angegeben haben.
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 1) Der E:in-range-Pseudoklassenselektor wird verwendet, um den Stil anzugeben, wenn der effektive Wert des Elements auf einen Bereich beschränkt ist und der tatsächliche Eingabewert innerhalb dieses Bereichs liegt.
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

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Pseudoklassenselektoren für den UI-Elementstatus in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vergleichen Sie die Unterschiede und Zusammenhänge zwischen px, em, rem und pt in CSSNächster Artikel：Vergleichen Sie die Unterschiede und Zusammenhänge zwischen px, em, rem und pt in CSS

In Verbindung stehende Artikel

Mehr sehen