HTML5+CSS开发 新增选择器 CH4-1 CSS3新增选择器（2）.pptVIP

HTML5应用开发 CSS3新增选择器 第*页 UI元素状态伪类选择器语法 E:hover、E:active和E:focus E:enabled与E:disabled E:read-only与E:read-write E:checked、E:default和E:indeterminate E::selection E:invalid与E:valid E:required与E:optional E:in-range与E:out-of-range 第*页 UI元素的状态一般包括：启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。 在HTML元素中有可用和不可用状态，例如表单中的文本输入框；HTML元素中还有选中和未选中状态，例如表单中的复选按钮和单选按钮。这几种状态都是CSS3选择器中常用的状态伪类选择器，详细说明如表所示。 选择器 类型 功能描述 E:checked 选中状态伪类选择器 匹配选中的复选按钮或单选按钮表单元素 E:enabled 启用状态伪类选择器 匹配所有启用的表单元素 E:disabled 不可用状态伪类选择器 匹配所有禁用的表单元素 第*页 E:hover选择器用来指定当鼠标指针移动到元素上面时，元素所使用的样式。 E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开时）时使用的的样式。 E:focus选择器用来指定当元素获得焦点时使用的样式。主要是文本框控件获得焦点病进行文字输入时使用。 第*页 E:enabled选择器用来指定当前元素处于可用状态时的样式 E:disabled选择器用来指定当前元素处于不可用状态时的样式 第*页 E:read-only选择器用来指定当元素处于只读状态时的样式，在ff下需要写成-moz-read-only的形式 E:read-write选择器用来指定当元素处于非只读状态时的样式。在ff下需要写成-moz-read-write的形式 第*页 E:checked选择器用来指定当表单中的radio单选按钮或checkbox复选框处于选取状态的时的样式。在ff下需要写成-moz-checked的形式 E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或者复选框的样式。需要注意的是，即使用户将默认设定为选取状态的单选按钮或者复选框修改为非选取状态，使用E:default选择器设定的样式依然有效。 E:indeterminate选择器用来指定当页面打开时，如果一组单选按钮中任何一个单选按钮都没有设定为选取状态时的整组的单选按钮的样式。如果用户选中这组中的任何一个单选按钮，那么整组的单选按钮的样式被取消。 第*页 ● E::selection选择器用来指定当元素处于选中状态时的样式。这里需要注意的是:在ff下使用时，需要写成-moz-selection的形式。 第*页 E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。 E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。 第*页 E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。 E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。 第*页 E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。 E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。