css3选择器

":first-child" 选择父元素下的第一个子元素。列: ol > li :first-child{color:red;}  ol元素中的第一个li元素内容设为红色；

":last-child" 选择父元素的最后一个子元素。列: ul > li :last-child{background:blue;}  ul列表中的最后一个li元素背景设为蓝色；

":nth-child(n)" 定位父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)。

":nth-last-child(n)" 从父元素的最后一个子元素开始计算，来选择特定的元素。

":first-of-type" 定位父元素下某个类型的第一个子元素。 列: .wrapper > p:first-of-type {background:orange;} 将容器“div.wrapper”中的第一个p元素背景设置为橙色。

":nth-of-type(n)" 定位父元素中某个特定类型的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)。

":last-of-type" 选择父元素下的某个特定类型的最后一个子元素。

":nth-last-of-type(n)" 从最后一个子元素开始，选择父元素中指定的某种子元素类型。

":only-child" 选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

"only-od-type" 是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

"::before"和"::after" 这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

列: 

.effect::before, .effect::after{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
上面代码作用在class名叫.effect上的div的前（before）后(after)都添加一个空元素，然后为这两个空元素添加阴影特效。