零基础建站培训介绍

当前位置:

CSS3中UI元素状态伪类选择器详解

Part I 这种选择器的共同特征:

指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用

CSS3中共有11种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

-------------------------------------------------------------------------------------------------------

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 指定当元素处于不可用状态时的样式;(常用于输入框不可用时的样式)

1

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  指定当元素处于选中状态时的样式;例如:控制网页中的文字被选中时的样式2


::selection{background:green;color:#fff}
12.E:invalid 指定当无素不能通过HTML5使用的属性指定的检查或者当前内容不符合要求的格式。例如:输入框输入的文字格式不符合要求。 3 13.E:valid 指定当无素通过HTML5使用的属性指定的检查或者当前内容符合要求的格式。 14.E:in-range 指定当元素的有效值被规定在一个范围内,如1~100,输入的值在这个有效值内时的样式 14.E:out-of-range 指定当元素的有效值被规定在一个范围内,如1~100,但输入的值超出这个有效值后的样式

4

上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • 什么是css3-gird布局格式 (140804 次浏览)
    CSS3-Gird布局格式css3-gird布局格式应用很广泛,最简单的例子就是内容的分栏显示。对于布局复杂的三栏网页来说,如果使用CSS3Grid布局的话,我们
  • CSS3新增选择器有哪些 图文教程 (142147 次浏览)
    css1-css3提供特别丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。(相关教程:CSS3视频教
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:
  • html元素标签属性大全 (115064 次浏览)
    什么是HTML属性每个HTML元素都可以给它添加一些属性,让它成为我们做网站时需要的样子。例如一段文字,我们可以给它添加属性,使这段文字变成红色,
  • 问题:在HTML中元素分为块状元素和行内元素,块状元素的外边距和内边距我们分别使用margin\padding属性来设置,那么行内元素可以设置margin\paddi
  • PHP设置页面返回404状态码1. 通过header()方法来实现,最简单的方法,而且对php的版本没什么限制[cce_php]<?phpheader('HTTP/1.1 404 No
  • 什么是CSS伪类伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。例如:
  • :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用
  • 做网站怎么选择服务器 (12726 次浏览)
    对于服务器租用的选择主要有以下几点大的标准:首先、服务器安全不能忽视,特别重要的是看他们是否有提供数据备份服务。其次、服务器租用的速度是