UI元素状态伪类选择器

E:hover 用于指定当鼠标指针移动到元素上面时元素所使用的样式;E:action 用于指定元素被激活(鼠标在元素上按下还没有松开)时所使用的样式;E:focus 用于指定元素获得光标焦点时所使用的样式,主要是在文本框空间获得焦点并进行文字输入时使用的样式;E:enable 设置该元素处于可用状态的样式;E:disabled 设置该元素处于不可用状态时的样式;E:read-only 设置元素处于只读状态时的样式;E:read-write 设置元素处于非只读状态时的样式;E:checked 指定表单中的radio单选按钮或者checkbox复选框处于选取状态时的样式;E:default 指定页面打开时默认处于选取状态的单选按钮或者复选框样式;(即使用户将默认状态设置为选取状态的单选按钮或者复选框改为禁用状态,,使用该选择器设置的样式同样有效)

E:indeterminate 指定当页面打开时,如果一组单选按钮中任何一个选项都没有被设定为选取状态时,整组单选按钮的样式;如果用户选取了其中任何一个单选按钮,则该样式将被停止使用。

E::selection 设置元素被选中状态的样式。

简单看一下用法:

<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style>#submit:active{outline:none;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;…}#submit::-moz-focus-inner{border:none;}</style></head><body><form id="login"><fieldset id="inputs"><input id="username" type="text" placeholder="名称" autofocus required /><input id="password" type="password" placeholder="密码" required /></fieldset><fieldset id="actions"><input type="submit" id="submit" value="登录" /><a href="">忘记密码?</a><a href="">注册</a></fieldset><a href="" id="back">返回</a></form></body></html>

<!DOCTYPE html><html lang="en" xmlns=""><head><meta charset="utf-8" /><title></title><style type="text/css">:checked{outline:2px solid #ee0000;}</style></head><body><div id="table"><div id="eve1"><form>服务态度:<input type="checkbox">非常好</input><input type="checkbox">良好</input><input type="checkbox">一般</input></form></div></div></body></html>

慢慢学会了长大。流转的时光,

UI元素状态伪类选择器

相关文章:

你感兴趣的文章:

标签云: