第一章：第三课选择器-状态伪类选择器[四]

前三节我们学习了form元素的状态伪类选择器，今天我们再来学习一下复选框和单选框的选择器，以下选择器Opera支持最好！

:default选择器、:checked选择器和:indeterminate选择器
:default状态伪类选择器用来指定当前元素处于非选取状态的单选框或复选框的样式；
:checked状态伪类选择器用来指当前元素处于选取状态的单选框或复选框状态的样式；
:indeterminate状态伪类选择器用来指定当页面打开时，某组中的单选框或复选框元素还没有选取状态的时样式；

<!DOCTYPE HTML><html>    <head>        <meta charset="gb2312">        <title>CSS3每日一练之选择器-状态伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>        <style type="text/css">        *{margin:0; padding:0;}        body{margin-bottom:20px; font-size:14px;}            #content{margin:30px auto; padding:10px; width:300px; overflow:hidden;}                label{display:inline; margin-bottom:5px; width:150px; height:25px; line-height:25px; float:left;}                input[type=checkbox]:default{border:2px #00f solid;}                input[type=checkbox]:checked{border:2px #f00 solid;}                input[type=radio]:indeterminate{border:2px #0ff solid;}        </style>    </head>

    <body>        <div id="content">            <label for="checkbox1"><input id="checkbox1" name="web" type="checkbox" checked/>前端</label>            <label for="checkbox2"><input id="checkbox2" name="web" type="checkbox"/>前端开发</label>            <label for="checkbox3"><input id="checkbox3" name="web" type="checkbox"/>web前端开发</label>            <label for="checkbox4"><input id="checkbox4" name="web" type="checkbox"/>前端开发网</label>            <label for="checkbox5"><input id="checkbox5" name="web" type="checkbox"/>W3Cfuns</label>            <label for="radio1"><input id="radio1" name="web" type="radio"/>男</label>            <label for="radio2"><input id="radio2" name="web" type="radio"/>女</label>        </div>    </body></html>

转载于:https://www.cnblogs.com/youdoce/archive/2012/03/03/2378314.html

第一章：第三课选择器-状态伪类选择器[四]相关推荐

CSS鼠标动作的五种状态[伪类选择器]
CSS鼠标动作的五种状态[伪类选择器] 注意事项设置的样式失效的情况直接跳过就行了别纠结如果发现鼠标互动没反应你要检查一下 css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式 ...
CSS UI状态伪类选择器
UI状态伪类选择器,用于选择处于某种状态下的UI元素,主要用于HTML表单上,根据表单元素的不同状态,定义不同的样式,来增强用户体验. 表单元素的状态包括获得焦点.失去焦点.选中.未选中.可用.不可用 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
css选择器类型伪类选择器(详)
css选择器有八种: 1.标签选择器(如:body,div,p,ul,li). 2..类选择器(如:class="head",class="head_logo" ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
CSS复合选择器---后代选择器、子选择器、并集选择器、伪类选择器
CSS复合选择器建立在基础选择器上,对基本选择器进行组合形成的可以更准确.更高效的选择目标元素(标签) 包含:后代选择器.子选择器.并集选择器.伪类选择器一.后代选择器又称为包含选择器,可以选 ...

第一章：第三课选择器-状态伪类选择器[四]

第一章：第三课选择器-状态伪类选择器[四]相关推荐

最新文章

热门文章

第一章：第三课 选择器-状态伪类选择器[四]

第一章：第三课 选择器-状态伪类选择器[四]相关推荐

最新文章

热门文章

第一章：第三课选择器-状态伪类选择器[四]

第一章：第三课选择器-状态伪类选择器[四]相关推荐