HTML代码

<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="checkbox" checked="checked" id="usename" /><span>√</span>
    </div>
    <lable for="usename">我是选中状态</lable>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="checkbox"  id="usepwd" /><span>√</span>
    </div>
    <label for="usepwd">我是未选中状态</label>
  </div>
</form>

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;
  position: absolute;
  top:0;
  left: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;
}

结果演示

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态

<form action="#">

  <div>

    <label for="enabled">可用输入框:</label>

    <input type="text" id="enabled" enabled="enabled" />

  </div>

  <div>

    <label for="disabled">禁用输入框:</label>

    <input type="text" id="disabled" disabled="disabled" />

  </div>

 </form>  

input[type="text"]:enabled {

  border: 1px solid #f36;

  box-shadow: 0 0 5px #f36;

}

input[type="text"]:disabled{

  box-shadow: none;

}

“:first-child”选择器表示的是选择父元素的第一个子元素。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。即子元素是同一种类型，选择第一个子元素。

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。即子元素是同一种类型，选择最后一个子元素。

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。即子元素是同一种类型，选择第几个子元素。

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，不同的是从某父元素的最后一个子元素开始计算，来选择特定的元素。即子元素是同一种类型，选择最后第几个子元素。

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。即子元素是多种类型，选择其中一个类型的第一个子元素

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。即子元素是多种类型，选择其中一个类型的最后一个子元素。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。即子元素是多种类型，选择其中一个类型的第几个子元素。

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。即子元素是多种类型，选择其中一个类型的最后第几个子元素。

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。即子元素是同一种类型，显示数量不等，选择子元素只显示一个的那项

“:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。即子元素是多种类型，显示数量不等，选择其中一个类型他的子元素只显示一个

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

border-radius:1 2 3 4;

上半圆；1 2 0 0；右半圆：0 2  3 0；

下半圆：0 0 3 4；左半圆：1 0 0 4；哪边要圆则哪两边角改变值

CSS3背景 back round-origin

设置元素背景图片的原始起始位置。

语法：

background-origin: border-box | padding-box | content-box；

参数分别表示背景图片是从边框，还是内边框（默认值），或者内容区域开始显示。

注意：

如果背景不是ni-rcpcat,这个属性无效，它会从边框开始显示。

background-image:linear-gradient(to left top,red,green,black);

linear-gradient     渐变类型（线性渐变）

to left top     渐变方向，从右下角到左上角

red，green，black     渐变颜色

border-image（为边框应用图片）的语法：

border-image:url(图片路径) 70 70 70 70（切割图片的宽度，遵循顺时针的规律来设置） repeat（图片的延伸方式，分别为：round平铺，repeat重复，stretch拉伸）

嵌入字体

@font-facc能够加载服务器端的字体文件，让浏览器端可以显示用户电脑没有的安装字体。！！！！

语法：

@font-face{

    font-family: "MOOC Font";  //字体名称

    src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");  //字体文件在服务器上的相对或者绝对名称！

}

强制文本在一行内显示（white-space：nowrap）

溢出内容为隐藏（overflow：hidden）

溢出文本显示省略号，代码如下：

text-overflow-ellipsis;

overflow:hidden;

white-space:nowrap;

CSS3颜色 渐变颜色

Css3 线性渐变

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

                        渐变类型径向radial      渐变方向             表示颜色的起点和结束点。可以有两至多个色值     

box-shadow: x轴偏移量  y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [ 投影方式]；

1. 阴影模糊半径与阴影扩展半径的区别：
   阴影模糊半径：此参数可选，其值自能位正值，如果其值为0时，表示阴影都不具有模糊效果，其值越大阴影的边缘月越模糊；
   阴影扩展半径：此参数可选，其值可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
   

2. X轴偏移量和Y轴偏移量值可以设置为负数

   box-shadow: x轴偏移量  y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [ 投影方式]；
   

当同一个页面上有很多的url的时候你可以取不同的名字，只要#号后对的名称与id=""中的名称对应就可以了。
如下面例子：
html代码：  

<h2><a href="#brand">Brand</a></h2>
<div class="menuSection" id="brand">
  content for Brand
</div>
<h2><a href="#jake">Brand</a></h2>
<div class="menuSection" id="jake">
 content for jake
</div>
<h2><a href="#aron">Brand</a></h2>
<div class="menuSection" id="aron">
    content for aron
</div>

css代码：

#brand:target {
  background: orange;
  color: #fff;
}#jake:target {
  background: blue;
  color: #fff;
}#aron:target {
  background: red;
  color: #fff;
}

如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

input:not([type="submit"]){  border:1px solid red; }

相关HTML代码：

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <label for="name">Password Input:</label>
    <input type="text" name="name" id="name" placeholder="John Smith" />
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>