css3 选择器（三）
这篇和前两篇内容相关性不大，主要是涉及到一些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 一.深呼吸,直 ...
随机推荐
- Xamarin.Android之给我们的应用加点过渡效果
零.前言 试想一下,我们的应用正在请求一些数据,假设网络不是很好,要花比较长的时间等待,这个时候界面什么反应也没有, 一动不动,用户可能就会认为应用挂掉了,这么久都没反应的,说不定下一分钟用户就把它卸 ...
- sql语句优化SQL Server
MS SQL Server查询优化方法查询速度慢的原因很多,常见如下几种 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O吞吐量小,形成了 ...
- html页面内容超出后显示水平滚动条的问题
这个问题已经遇到好几次,解决起来也熟练了很多. 出现这种问题一般都是html或页面中的某一内部元素宽度超了. 下面总结我遇到的几种情况: 1.某一内部元素width设为100%,然而它还有bord ...
- Spring2.0-applicationContext.xml中使用el表达式给实体类属性赋值被当成字符串-遁地龙卷风
(-1)写在前面 这两天读<javaweb开发王者归来>,学到Spring的PropertyPlaceholderConfigurer时出现一个问题,我已${jdbc.name}的形式赋值 ...
- 如何在MAC OS X下安装配置java开发工具
简介: Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向对象编程语 ...
- Singleton（单例模式）
一. /** * lazy man(不是线程安全的) * @author TMAC-J * */ public class Singleton { private static Singleton i ...
- centos svn服务器搭建
1.安装svnyum install subversion查看安装目录rpm -ql subversion 查看yum安装subversion的位置 2.创建仓库创建版本库目录mkdir -p /va ...
- 通过Laravel 初识Vue.js
最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...
- 【转】微信小程序给程序员带来的可能是一个赚钱的机遇
自上周被微信小程序刷屏之后,这周大家都在谈微信小程序能够带来哪些红利的话题,其实我想从程序员的角度来谈谈,带给我们程序员来的红利,或许是我们程序员创业或者赚钱的机遇. 其实我从<作为移动开发程序 ...
- JavaScript中数组去除重复
方式一:常规模式 1.构建一个新的临时数组存放结果 2.for循环中每次从原数组中取出一个元素,用这个元素循环与临时数组对比 3.若临时数组中没有该元素,则存到临时数组中 //方式一: Array.p ...