这篇和前两篇内容相关性不大，主要是涉及到一些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 一.深呼吸,直 ...

随机推荐

sealed、new、virtual、abstract与override 趣解
1. sealed——“断子绝孙” 密封类不能被继承.密封方法可以重写基类中的方法,但其本身不能在任何派生类中进一步重写.当应用于方法或属性时,sealed修饰符必须始终与override一起使用. ...
[修正] iOS 10 使用相机及相簿闪退的问题修正
iOS 10 新规定,在取用相机,相簿,联络资讯,麦克风需要在 Version Info 加入指定的 key,否则闪退: 注:将下面的 Key 复制到工程 Option -> Version I ...
java中的String
String作为java最常用的类,被广大程序员们蹂躏已久,让我们又爱又恨,应该如何正确的使用它呢,老姜带你一起来揭开它神秘的面纱. 一.String类定义时被冠上了final的标识符,决定了它终生不 ...
gson笔记解析json数据
gson中负责json数据解析的类是JsonReader. Json格式有两种结构,一种是对象(键值对的组合,无序),另外一种是数组(值的有序集合). 因此针对这两种格式,JsonReader提供了不 ...
ABP之动态WebAPI(一)
ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的调用没有跨过HttpHan ...
JavaScript类属性
对象的类属性(class attribute)是一个字符串,用以表示对象的类型信息.ECMAScript3和ECMAScript5都未提供设置这个属性的方法,并只有一个间接的方法可以查询它.默认的to ...
MVC数据传递
一.数据传递 1.ViewData[]: 用法:action中:ViewData["key"]="aaa";,V层接收ViewData["key&qu ...
javascript 模式(1)——代码复用
程序的开发离不开代码的复用,通过代码复用可以减少开发和维护成本,在谈及代码复用的时候,会首先想到继承性,但继承并不是解决代码复用的唯一方式,还有其他的复用模式比如对象组合.本节将会讲解多种继承模式以实 ...
var a=function()跟function a()的区别
//代码一: a(); //执行这个会报错 var a = function(index){ alert(index); } a(); //执行这个不会报错 //代码二: a(); //执行这个不会报 ...
移动web之用CSS样式写如苹果手机的开关键
话说这个问题纠结了近一个小时,为什么呢?看看就知道了. 在公司的商旅Web移动版本项目上有这么一个交互,需要模仿iphone自带的开关,好吧,肯定没什么问题. Tip:请使用Chrome查看以下案例 ...

css3 选择器（三）