CSS3--UI元素状态伪类选择器

Part I 这种选择器的共同特征:
指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用
CSS3中共有多种UI元素状态伪类选择器:

E:hover | E:active | E:focus | E:enable | E:disable
E:read-only | E:read-write | E:checked | E:default
E:indeterminate | E::selection | E:valid | E:invalid
E:required | E:optional | E:in-range


Part II 使用方法:(见例)

     <style>    

     input[type="text"]:hover{样式;}   //鼠标指针移动到某个文本框控件上的样式    

     input[type="text"]:focus{样式;}   //文本框控件被激活时的样式    

     input[type="text"]:active{样式;}  //文本框控件获得光标焦点后的样式

     </style>

Part III 详细说明:

  1. E:hover 鼠标指针移动到某个文本框控件上的样式;

  2. E:active 元素被激活(鼠标在元素上按下还没有松开)时使用的样式;

  3. E:focus 元素获得光标焦点时使用的样式,主要是在文本框控件获得焦点并进行文字输入的时候使用;

  4. E:enable 指定当元素处于可用状态时的样式;

  5. E:disable 指定当元素处于不可用状态时的样式;

  6. E:read-only 指定当元素处于只读状态时的样式;

  7. E:read-write 指定当元素处于非只读状态时的样式;

注:在FF下要写成 -moz-read-only 或者 -moz-read-write

        例:<style>  

              input[type="text"]:read-only{...}   

              input[type="text"]:read-write{...}   

              input[type="text"]:-moz-read-only{...}    //针对FF而写   

              input[type="text"]:-moz-read-write{...}   //针对FF而写          

             </style>

8.E:checked 指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成:-moz-checked);

9.E:default 指定当页面打开时默认处于选区状态的radio或checkbox控件的样式;

10.E:indeterminate 指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式,如果用户选取了一个单选框,则该样式被取消

11.E::selection 指定当元素处于选中状态时的样式;

12.E:valid伪类选择器用来指定,当元素内容通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

13.E:invalid伪类选择器用来指定,当元素内容不能通过HTML 5通过使用元素的诸如required、pattern等属性所指定的检查或元素内容不符合元素的规定格式(例如通过使用type属性值为Email的input元素来限定元素内容必须为有效的Email格式)时的样式。

代码清单19-25为一个E:invalid伪类选择器与E:valid伪类选择器的使用示例。示例页面中具有一个使用了required属性的input元素,当元素中没有被填入内容时元素背景色为红色,当元素中填入内容后元素背景色变为白色。

<pre>
代码清单19-25 E:invalid伪类选择器与E:valid伪类选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title> E:invalid伪类选择器与E:valid伪类选择器结合使用示例
</title>
<style type="text/css">
input[type="text"]:invalid{
background-color: red;
}
input[type="text"]:valid{
background-color: white;
}
</style>
</head>
<body>
<form>
<p>请输入任意文字:<input type="text" required/>
</p>
</form>
</body>
</html>
</pre>

14.E:required伪类选择器用来指定允许使用required属性,且已经指定了required属性的input元素、select元素以及textarea元素的样式。
15.E:optional伪类选择器用来指定允许使用required属性,且未指定required属性的input元素、select元素以及textarea元素的样式。

代码清单19-26为一个E:required伪类选择器与E:optional伪类选择器的使用示例。示例页面中具有两个分别用于输入姓名与住址的文本框,并且对用于输入姓名的文本框指定了required属性,不对用于输入住址的文本框指定required属性。同时通过E:required伪类选择器指定用于输入姓名的文本框边框为红色,宽度为3px,通过E:optional伪类选择器指定用于输入住址的文本框边框为黑色,宽度为1px。

<pre>
代码清单19-26 E:required伪类选择器与E:optional伪类选择器的使用示例
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>E:required伪类选择器与E:optional伪类选择器结合使用示例</title>
<styletype="text/css">
input[type="text"]:required{
border-color:red;
border-width:3px;
}
input[type="text"]:optional{
border-color:black;
border-width:1px;
}
</style>
</head>
<body>
<form>
姓名:<inputtype="text"requiredplaceholder="必须输入姓名"/>

住址:<inputtype="text"/>
</form>
</body>
</html>
</pre>

16.E:in-range选择器用于标签的值在指定区间值时显示的样式。

以上大部分引用
http://www.cnblogs.com/ccqqccqqqq/archive/2012/02/27/2370194.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容