伪类与伪元素不同:
css伪类:link visited active first-child hover focus
css3伪类：nth-child() nth-last-child() first-of-type last-of-type nth-of-type() nth-last-of-type() :target :checked :enabled :empty :disable
伪元素：before after
如果伪元素只需要兼容webkit firefox opera 伪元素前最好用双冒号::，如果不得不兼容ie，用单冒号:
link是未点击时使用的样式，active是点击时使用的样式 visited是点击过后使用的样式。(a标签常用link active visited 这三个伪类)
hover是鼠标悬停在指定元素上使用的样式。focus是元素获得光标标点时使用的样式，通常用于文本的输入
小案例:利用伪元素来改变按钮背景颜色
p:hover:before{}给定位覆盖比如rgba(255，255，255，.2）如果覆盖白色半透明层会使其更亮。
覆盖同理覆盖黑色半透明层会使其更暗rgba(0，0，0，.2）
除了rgba 还有HSL hsl(0，100%，100%) 色相 饱和度 亮度
目前css css3没有父元素选择器，后代选择器居多。
兄弟元素:拥有相同父级，且自身等级相同。
兄弟元素选择器:分两种 1.+ p +span 选择p后的第一个兄弟span
2.~ p~span 选择p后所有的兄弟span
1.first-of-type:第一个eg:选中了 div里的第一个p,以及div之外的第一个p.
2.last-of-type(最后一个)
3.nth-of-type(number) 从上向下数 eg: nth-of-type(2) 选中第二个
4.ntn-last-of-type(number) 从下向上数 egnth-last-of-type(2) :倒数第二个
5.first-child:第一个子元素且位置必须是第一个，会受到其它元素的位置影响 eg:p:first-child 
可能有多个值，当不同父级之下都有p且都在第一个
6.last-child
7.nth-child(number):
利用以上选择器做：
可以同时选中两行商品任何一个，这里用作清除margin
♥nth-child(n) nth-of-type nth-last-of-type 括号里面可以放n(全选),2n+1(奇数) 2n(偶数) 3n(3的倍数)
type与child,一般都可以，child更死性，type与nth之间有of,child与nth之间没有of，且-of-type找的可能是父级 child找的是子级
not()（否定选择器）括号内可以放类名或者id名也可放其它选择器：eg:div:not(.m){} 选择除了类名为m的div
div.not(:last-child){}选择除了最后一个子元素div的其它div.
括号内用选择器的话，前面要加上冒号 ：
关于字体的选择器：
first-letter:第一个字
first-line:第一行
::selection{} 鼠标选中的区域部分
比较特殊前面要有两个冒号
after 与 before是在指定元素的内容前后插入的行内元素，其有content属性必须写，可以给空字符串值。
给li before与after伪元素位置如下。
before: 出现的位置如下：
<li>(before) <a href=""></a>（after） </li>
作用：做小黑线:
元素标签对伪元素的支持情况:双标签大多支持伪元素，单闭合标签不支持伪元素，比如img.input，input较特殊在有type radio或者checkbox时支持伪元素
before与after的妙用:
1.清除浮动
不利用伪元素清除浮动:.clearfix{display:block;content:"";clear:both;}
利用伪元素(after)清除浮动:.clearfix:after{display:block;content:"";clear:both;visibility:hidden;height:0;}
2，装小图标或者覆盖原先小图标，position:absolute 再给其display后设置特定宽高进行覆盖，这样比多写个标签元素要好。
