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

随机推荐

node.js操作mysql数据库之增删改查
安装mysql模块 npm install mysql 数据库准备 mysql server所在的机器IP地址是192.168.0.108,登录账户就用root@123456 在mysql中创建tes ...
gRPC .NET Core跨平台学习
前些天发布gRPC C# 学习,在.NET Framework 中使用gRPC ,今天来学习 .NET Core gRPC. gRPC 的.NET Core 包在NuGet 上发布了,结合.NET C ...
.NET正则表达式基础入门（一）
字符组正则表达式的字符组十分简单,就是列出你所想要匹配的字符.阅读本章前,建议先下载我于CSDN上传的示例代码,下载无需分数,下载链接. 1.普通字符组普通字符组,列出所有你需要匹配的字符. 例如 ...
简析.NET Core 以及与 .NET Framework的关系
简析.NET Core 以及与 .NET Framework的关系一 .NET 的 Framework 们二 .NET Core的到来 1. Runtime 2. Unified BCL 3. W ...
jQuery图片轮播特效
效果预览:http://hovertree.com/texiao/jquery/51/ 这款特效有缩略图,包含文字说明和链接,可以自动播放,也可以手动切换. 使用的jQuery库版本为1.12.3 , ...
编译可供C#调用的C/C++动态链接库dll文件
编译可供C#调用的C/C++动态链接库dll文件,C语言控制台应用程序,探索生成dll过程由于项目需求,需要公司另一个团队提供相关算法支持,是用C语言编译好的dll库提供给我们进行调用. 但是拿到d ...
从零开始学 Java - Spring 一主多从、多主多从数据库配置
待会苹果要开发布会我写完这篇文章就准备去看发布会了,因为我买了好几包瓜子和啤酒.由于苹果的保密做的越来越差劲,该曝光的信息差不多全部曝光了,我们这种熬夜看发布会的只不过是让这些信息更加真实,或者说是 ...
Tomcat启动报错整理
1.启动报 Connector attribute SSLCertificateFile must be defined when using SSL with APR conf\server.xml ...
OData V4 学习目录
开放数据协议(Open Data Protocol,缩写OData)是一种描述如何创建和访问Restful服务的OASIS标准. Open Data Protocol (开放数据协议,OData)是用 ...
关于XAMPP默认端口80 和443被占用的问题
关于安装xampp-win32-1.8.1-VC9-installer.zip后启动时候报端口80和443被占用的问题解决 xampp-win32-1.8.1-VC9-installer.zip下载地 ...

css3 选择器（三）