这篇和前两篇内容相关性不大，主要是涉及到一些css3的状态选择器，所以标题从一开始。

一、【:enabled】选择器

一看这个属性就知道是专为表单元素提供的。在表单中输入框，密码框，复选框都有可用(:enabled)和不可用（:disabled）状态，默认情况，这些表单元素都处在可用状态。可通过选择器:enabled为这些表单元素设置样式。

举例：可用输入框设置样式。

<meta charset="utf-8">

<style>

div {

    margin: 30px;

}

input[type="text"]:enabled {

    border: 1px solid #f36;

    box-shadow: 0 0 5px #f36;

}

</style>

<form action="#">

<div>

<label>可用输入框:<input type="text"/></label>

</div>

<div>

<label>禁用输入框:<input type="text" disabled="disabled"/></label>

</div>

</form>

二、【：disabled】选择器

看到有【:enabled】选择器，就知道肯定有【:disabled】选择器了。看名字就知道:disabled选择器和:enabled选择器相反，用来匹配不可用的表单元素。要使用:disabled选择器，需要在表单元素中设置"disbled"属性。

举例：

<meta charset="utf-8">

<style type="text/css">

form {

    margin: 30px;

}

div {

    margin: 10px;

}

input {

    padding: 10px;

    border: 1px solid orange;

    background: #fff;

    border-radius: 5px;

}

input[type="submit"] {

    background: orange;

    color: #fff;

}

input[type="submit"]:disabled {

    background: #eee;

    border-color: #eee;

    color: #ccc;

}

</style>

<form action="#">

<div><input type="text"/></div>

<div>

<input type="submit"value="我要回到上一步"/>

<input type="submit"value="禁止点下一步"disabled />

</div>

</form>

三、【:checked】选择器

在表单元素中，单选按钮和复选按钮都有选中和未选中状态。如果有做过尝试就知道，要设置这两个按钮默认样式是比较困难的。而在css3中，可以通过:checked选择器配合其他标签实现自定义样式。而:checked表示的是选中状态。

这个是个大招，可以省不少功夫。

举例：使用:checked选择器模拟实现复选框样式。【坑：点选框时无法选中，必须点文字才能选中】update:15/10/23

<meta charset="utf-8">

<style type="text/css">

form {

  border: 1px solid #ccc;

  padding: 20px;

  width: 300px;

  margin: 30px auto;

}

.wrapper {

  margin-bottom: 10px;

}

.box {

  display: inline-block;

  width: 20px;

  height: 20px;

  margin-right: 10px;

  position: relative;

  border: 2px solid orange;

  vertical-align: middle;

}

.box input {

  opacity: 0;

}

.box span {

  position: absolute;

  top: -10px;

  right: 3px;

  font-size: 30px;

  font-weight: bold;

  font-family: Arial;

  -webkit-transform: rotate(30deg);

  transform: rotate(30deg);

  color: orange;

}

input[type="checkbox"] + span {

  opacity: 0;

}

input[type="checkbox"]:checked + span {

  opacity: 1;

}

</style>

<form action="#">

  <div class="wrapper">

    <div class="box">

      <input type="checkbox" checked="checked" id="username" /><span>√</span>

    </div>

    <label for="username">我是选中状态</label>

  </div>

  <div class="wrapper">

    <div class="box">

      <input type="checkbox"  id="userpwd" /><span>√</span>

    </div>

    <label for="userpwd">我是未选中状态</label>

  </div>

</form>

模拟实现一个选中和未选中的样式。

没有样式时的效果图如下，

最终添加样式后效果如下。

举例：:checked状态选择器模拟单选按钮样式。

<meta charset="utf-8">

<style type="text/css">

form {

    border: 1px solid #ccc;

    padding: 20px;

    width: 300px;

    margin: 30px auto;

}

.wrapper {

    margin-bottom: 10px;

}

.box {

    display: inline-block;

    width: 30px;

    height: 30px;

    margin-right: 10px;

    position: relative;

    background: orange;

    vertical-align: middle;

    border-radius: 100%;

}

.box input {

    opacity: 0;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/

}

.box span {

    display: block;

    width: 10px;

    height: 10px;

    border-radius: 100%;

    position: absolute;

    background: #fff;

    top: 50%;

    left: 50%;

    margin: -5px 0  0 -5px;

    z-index: 1;

}

input[type="radio"] + span {

    opacity: 0;

}

input[type="radio"]:checked + span {

    opacity: 1;

}

</style>

<form action="#">

<div class="wrapper">

<div class="box">

<input type="radio" checked="checked" id="male" name="gender"/>

<span></span>

</div>

<label for="male">男</label>

</div>

<div class="wrapper">

<div class="box">

<input type="radio" id="female" name="gender"/>

<span></span>

</div>

<label for="female">女</label>

</div>

</form>

四、【::selection】选择器

设置选中文本样式，详情见CSS3 ::selection选择器，用的好也可以出奇制胜。

五、【：read-only】选择器

:read-only选择器用来指定处于只读状态元素的样式。简单说就是设置了“readonly”=readonly的元素。

举例：

<!DOCTYPE HTML>

<meta charset="utf-8"/>

<style type="text/css">

form {

  width: 300px;

  padding: 10px;

  border: 1px solid #ccc;

  margin: 50px auto;

}

form > input {

  margin-bottom: 10px;

}

input[type="text"] {

    border: 1px solid orange;

    padding: 5px;

    background: #fff;

    border-radius: 5px;

}

input[type="text"]:-moz-read-only {

    border-color: #ccc;

}

input[type="text"]:read-only {

    border-color: #ccc;

}

</style>

<form>

姓名:<input type="text"name="fullname"/>

<br />

国籍:<input type="text"name="country"value="China"readonly="readonly"/>

<br />

<input type="submit"value="提交"/>

</form>

</body>

</html>

六、【:read-write】选择器

有了【:read-only】，再来个与之相反的【:read-write】意思很明确，就是即可读，也可写的元素设置样式。我觉得这个选择器可能只是充数的，为了让css3选择器成为一个体系而加的，因为默认情况就是可读可写的啊。

上面的例子中如果改一点样式：给input[type="text"]加上:read-write选择器

input[type="text"]:read-write{

    border: 1px solid orange;

    padding: 5px;

    background: #fff;

    border-radius: 5px;

}

效果如下：

即无法给国籍这个输入框添加圆角之类的样式。

七、【::before】和【::after】

慕课网这样讲：

::before和::after这两个伪元素主要用来给元素的前面或者后面插入内容，和“content” 配合使用，使用的场景最多的就是清除浮动。

其实::before和::after内容还是比较多的，了解更多可参考::before和::after伪元素的用法。

PS:每次看到慕课网这种偶巴，好厉害。的东东，就有种淡淡的忧桑，有木有想过妹子们的感受。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4717826.html有问题欢迎与我讨论，共同进步。

css3 选择器（三）的更多相关文章

CSS3选择器（三）之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
不可不看！CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
CSS3 选择器——属性选择器
上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
css3选择器（一）
直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...
css3 选择器（二）
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
[css3]CSS3选择器:nth-child和:nth-of-type之间的差异
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

随机推荐

C#基础知识四之override和new的区别
override override是派生类用来重写基类方法的.调用的派生类方法,如需调用基类方法用base关键字 override不能重写非虚方法或静态方法. override重写必须用abstrac ...
MVC学习笔记1
1. Action 如果返回的是自定义的引用类型,则默认返回的是类名,其实就是调用了类的tostring方法. 2. @Html.Partial用于将分部视图渲染为字符串 @{Html.RenderP ...
C#开发微信门户及应用(29)--微信个性化菜单的实现
有一段时间没有接着微信的主题继续介绍里面的功能模块了,这段时间来,微信也做了不少的变化改动,针对这些特性我全面核对了一下相关的微信公众号和企业号的接口,对原有的微信API和系统管理做了全面的更新,本随 ...
HTTP协议详解
Author :Jeffrey 引言 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展. ...
Struts2基于注解的Action配置
使用注解来配置Action的最大好处就是可以实现零配置,但是事务都是有利有弊的,使用方便,维护起来就没那么方便了. 要使用注解方式,我们必须添加一个额外包:struts2-convention-plu ...
高性能 Socket 组件 HP-Socket v3.2.1 正式发布
HP-Socket 是一套通用的高性能 TCP/UDP Socket 组件,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C ...
Nginx主配置参数详解，Nginx配置网站
1.Niginx主配置文件参数详解 a.上面博客说了在Linux中安装nginx.博文地址为:http://www.cnblogs.com/hanyinglong/p/5102141.html b.当 ...
Ajax表单异步上传（包括文件域）
起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试先是尝试了一下 "jQu ...
Unity V3 初步使用 —— 为我的.NET项目从简单三层架构转到IOC做准备
[声明]由于本人表达能力有限,为避免不必要的误人子弟,本文将不会涉及IOC与DI,仅仅描述新版本Unity 3的使用(非Unity 3D,如果您想看的是Unity 3D请立即离开,否则莫怪此处“谋财害 ...
IOS客户端实现RSA加密
在IOS的app登陆模块,用户名和密码如果直接传给后台服务器,很容易被截获并伪造网络请求, 如果利用RSA算法在每个客户端利用公钥解密,服务器端进行私钥解密,即使截获了密码也是无法解密的在这里只介绍 ...

css3 选择器（三）