www.xttblog.com伪类选择器:E:checked、E:default和E:indeterminate

伪类选择器:E:checked、E:default和E:indeterminate

E:checked伪类选择器用来指定当表单中的radio单选框或checkbox复选框处于选取状态时的样式。

代码清单19-21为一个E:checked伪类选择器的使用示例,在该示例中使用了几个checkbox复选框,复选框在非选取状态时边框默认为黑色,当复选框处于选取状态时通过E:checked伪类选择器让选取框的边框变为蓝色。

代码清单19-21 E:checked伪类选择器的使用示例

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E:checked伪类选择器使用示例

input[type=”checkbox”]:checked { 
outline:2px solid blue; 
}

兴趣:阅读 旅游 看电影 上网

这段代码的运行结果如图19-31所示。

E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框控件的样式。需要注意的是,即使用户将该单选框或复选框控件的选取状态设定为非选取状态,E:default选择器中指定的样式仍然有效。

代码清单19-22为一个E:default选择器的使用示例,该示例中有几个复选框,第一个复选框被设定为默认打开时为选取状态,使用E:default选择器设定该复选框的边框为蓝色。

代码清单19-22 E:default选择器的使用示例

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E:default选择器的使用示例 
input[type=”checkbox”]:default { 
outline:2px solid blue; 
}

兴趣:阅读 旅游 看电影 上网

这段代码的运行结果如图19-32所示。

我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

需要注意的是,即使用户将默认设定为选取状态的单选框或复选框修改为非选取状态,使用default选择器设定的样式依然有效,如图19-33所示。

E:indeterminate伪类选择器用来指定当页面打开时,一组单选框中没有任何一个单选框被设定为选取状态时整组单选框的样式,如果用户选取了其中任何一个单选框,则该样式被取消指定。到目前为止,只有Opera浏览器对这个选择器提供支持。

代码清单19-23为一个E:indeterminate选择器的使用示例,该示例中有一组单选框,其中任何一个单选框都没有被设定为默认选取状态,使用E:indeterminate选择器来设定页面打开时该组单选框的边框为蓝色。

我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

代码清单19-23 E:indeterminate选择器的使用示例

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

E:indeterminate选择器的使用示例

input[type=”radio”]:indeterminate{ 
outline: solid 3px blue; 
}

年龄: 男 女

这段代码所示示例在页面打开时的页面显示如图19-34所示。

用户只要选取其中任何一个单选框,使用E:indeterminate选择器指定的样式就被取消指定,如图19-35所示。

我的博客:CODE大全www.codedq.net业余草www.xttblog.com爱分享www.ndislwf.comifxvn.com

原文地址:https://www.cnblogs.com/panda2/p/8732587.html

时间: 2024-10-07 08:46:49

www.xttblog.com伪类选择器:E:checked、E:default和E:indeterminate的相关文章

CSS3之伪元素选择器和伪类选择器

伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. a:link|a:visited|a:hover|a:active 在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的. 由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得

css 伪类选择器:checked实例讲解

css :checked伪类选择器介绍 css :checked伪类选择器用于选择匹配所有被选中的单选按钮(radio)或复选框(checkbox),你可以结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框. 语法: :checked { style properties } 如: input:checked{ background-color:red; } 设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Op

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3的状态伪类选择器

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3的状态伪类选择器</title> 6 <style type="text/css"> 7 :enabled{ 8 background-color: blue; 9 }; 10 :disabled{

css选择器2——伪类选择器

一.伪元素选择器 1. E:first-letter/E::first-letter(css3时代两个冒号) 设置元素内的第一个字符的样式. 例如: p::first-letter{font-size:50px;} 2. E:first-line/E::first-line 设置元素内的第一行的样式. 例如: p::first-line{color:green;} 3. E:before/E::before在每个E元素的内容之前插入内容.用来和content属性一起使用. 例如: a::befo

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

【转】伪类选择器

原文地址:http://www.w3cplus.com/css3/pseudo-class-selector 前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中 的第三部分,也是最后一部分——伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是 常用到的伪类选择器,那么先和大家一起简单总结一下

伪类选择器 css3

一,相邻选择器: 1,相邻选择器 1),定义:相邻选择器匹配指定元素的相邻兄弟元素(切记自己是一个参考点并不会选择) 2),用法:如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器 3),表示符号:使用加号(+)作为结合符 4),使用前提: a,必须有共同的父元素: b,必须相邻: 2,通用兄弟选择器匹配某元素后面的所有兄弟元素 1),定义:通用兄弟选择器匹配某元素后面的所有兄弟元素(包括自己) 2),用法:两种元素必须拥有相同的父元素,但是 element2