UI元素状态伪类选择器

所谓的ui元素状态伪类，就是主要针对表单元素的不同状态进行样式控制的伪类选择器。
表单元素的不同状态比如有文本框的可用和不可用，复选框和单选按钮的选中和没有被选中等状态。

在css 3 中共有11中UI伪类选择器，分别是：

E:hover;/*支持firefox、safari、Opera、ie8、chrome*/
E:active;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:focus; /*支持firefox、safari、Opera、ie8、chrome*/
E:enabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:disabled;/*支持firefox、safari、Opera、chrome   不支持ie8*/
E:read-only;/*支持firefox、Opera  不支持ie8、safari、chrome */
E:read-write/* 支持firefox、Opera  不支持ie8、safari、chrome*/ 
E:checked /*支持firefox、safari、Opera、chrome   不支持ie8*/
E::selection /* 支持firefox、safari、Opera、chrome   不支持ie8 */
E:default /*只支持firefox*/
E:indeterminate/*只支持Opera*/

逐个说明：

1.E:hover选择器用来指定当鼠标指针移动到元素上面时，元素所使用的样式。
2.E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开时）时使用的的样式。
3.E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。
4:E:enabled选择器用来指定当前元素处于可用状态时的样式
5:E:disabled选择器用来指定当前元素处于不可用状态时的样式
6.E:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式
7.E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式
8.E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式
9.E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。需要注意的是，即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态，使用E:default选择器设定的样式依然有效。
10.E:indeterminate选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。如果用户选中这组中的任何一个单选按钮，那么整组的单选按钮的样式被取消。
11.E::selection选择器用来指定当元素处于选中状态时的样式。这里需要注意的是:在ff下使用时，需要写成-moz-selection的形式。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
ul li{
  list-style:none;
}
input[type='text']:disabled{
  color:green;
}
</style>
</head>
<body>
<ul>
  <li><input type="text" value="php中文网"/></li>
  <li><input type="text" disabled value="php中文网"/></li>
</ul>
</body>
</html>

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</title> <style type="text/css"> ul li{ list-style:none; } input[type='text']:disabled{ color:green; } </style> </head> <body> <ul> <li><input type="text" value="php中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

UI元素状态伪类选择器

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]