接css3选择器（一）

接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 选择器（三）的更多相关文章

  1. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  2. 不可不看！CSS3中三十一种选择器用法

    原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...

  3. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  4. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  5. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  6. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  7. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

  8. css3 选择器（二）

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  9. [css3]CSS3选择器:nth-child和:nth-of-type之间的差异

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直 ...

随机推荐

  1. [moka同学笔记]六、Yii2.0课程笔记（魏曦老师教程）[徽章气泡]

  2. php实现设计模式之 适配器模式

    <?php /* * 适配器模式:将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原来由于接口不兼容而不能一起工作的那些类可以一起工作(结构型模式) * * 一个源接口,不符合 ...

  3. ASP.NET API(MVC) 对APP接口(Json格式)接收数据与返回数据的统一管理

    话不多说,直接进入主题. 需求:基于Http请求接收Json格式数据,返回Json格式的数据. 整理:对接收的数据与返回数据进行统一的封装整理,方便处理接收与返回数据,并对数据进行验证,通过C#的特性 ...

  4. 我与ADO.NET二三事

      天气渐冷,闲来无事就把业余时间自己使用的数据访问库凉一凉.这个库本人自己使用了2年多,主要用于个人学习时需要操作数据库时使用,非组织和商业性质的使用.记得上学的时候,在网络上看到SqlServer ...

  5. [deviceone开发]-do_SegmentView和do_SlideView联动的示例

    一.简介 示例展示do_SegmentView和do_SlideView联动的使用,这二个组件很常用,而且这个组合也非常常用,类似网易新闻的效果,上面滑动带动下面的slideview滑动,反过来也是. ...

  6. text-align=center 失效原因

    text-align属性是针对 内联元素居中得属性设置,对于块状元素使用margin:0 auto;来控制居中: 笔者在设置一个h2标签时设置了text-align:center;但是却始终出现在中间 ...

  7. Android—自定义标题栏的实现及遇见的问题解决

    开发者设计界面时候往往不会使用系统自带的标题栏,因为不美观,所以需要自己设置标题栏. 1.根据需求在xml文件中设置标题布局 <?xml version="1.0" enco ...

  8. Android中的AlertDialog使用示例四（多项选择确定对话框）

    在Android开发中,我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框,AlertDialog实现方法为建造者模式. ...

  9. [转]Design Pattern Interview Questions - Part 3

    State, Stratergy, Visitor Adapter and fly weight design pattern from interview perspective. (I) Can ...

  10. 【代码笔记】iOS-忘记密码选择整体button

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @class BECheckBox; @interface ...