零基础建站培训介绍

当前位置:

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多栏布局columns (5914 次浏览)
    CSS3多栏布局columns语法:columns: <'column-width'> || <'column-count'>;column-width:用来设置列宽,取值auto和像素值,实际
  • 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现。同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变
  • 响应式HTML网页可以自动适应不同浏览设备而自动变化版面,下面介绍一下怎么制作一个响应式HTML网页的方法和步骤。打开Dreamweaver软件,新建一个HTM
  • div+css布局是什么意思 (4967 次浏览)
    div css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的代码定位方式,可实现网页页面内容与表现相分离。简单来说就是
  • 我们学习CSS3视频教程时,做网站经常会看到CSS代码里会有一个ZOOM:1,删除ZOOM:1属性对网页却没有任意影响。那么ZOOM:1到底有什么作用呢?下面就跟
  • 我们在自己建网站时,经常需要用到background属性。我们还可以通过background-size来控制背景图片的尺寸。background-size有几个属性值,常用的是cov
  • CSS常用属性大全 (9189 次浏览)
    什么是CSS?CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在
  • 在自己建网站时,CSS是控制网站各类样式的文件,CSS全部是英文,为了方便学建网站新手使用CSS,下面是学做网站论坛总结的常用CSS英文汉语词汇对照表.
  • 学习了网站制作课程的学员都知道,网站的样式都是受CSS来控制的。下面是控制的CSS样式代码:强制不换行div{white-space:nowrap;}
  • Animate动画名称大全 (51451 次浏览)
    animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡