屏幕快照 2017-05-14 下午12.12.04.png
选择器 .p1 ,p2 多元素选择器，用，分割
后代选择器，#ct .p2 只选择id 为ct下的p2类
屏幕快照 2017-05-07 下午6.37.33.png
e>f 子元素选择器，用>分割，匹配e元素下的直接子元素f
截图中由于p2不是ct的直接子元素，其中嵌套的层级就不算了，所以 没有变为蓝色
屏幕快照 2017-05-07 下午6.44.08.png
直接相邻选择器，截图中选择了p1和其后的p
屏幕快照 2017-05-07 下午6.45.45.png
选择p1和之后后面所有的p邻居
屏幕快照 2017-05-07 下午6.48.03.png
只选择h2下的类p2
h2.p2之间没有任何空格（既，又的意思）
屏幕快照 2017-05-07 下午6.50.00.png
拥有active 的p2
屏幕快照 2017-05-07 下午6.53.00.png
input[type=password]{
width:200px;}
匹配属性type=password的元素
伪类选择器
屏幕快照 2017-05-07 下午6.56.25.png
不是类，而是一种状态
a:hover{
color:blue;
}
屏幕快照 2017-05-07 下午7.13.51.png
child:first-child 匹配父元素的第一个子元素
屏幕快照 2017-05-07 下午7.27.39.png
匹配该元素父容器下的同种类型下的第2个
屏幕快照 2017-05-07 下午7.30.53.png
匹配该元素的父容器下拥有同种类型的第一个元素
屏幕快照 2017-05-07 下午7.37.10.png
屏幕快照 2017-05-07 下午7.41.17.png
屏幕快照 2017-05-07 下午7.47.18.png
屏幕快照 2017-05-07 下午7.51.19.png
合理的使用命名空间
屏幕快照 2017-05-07 下午7.53.20.png
合理的抽象出一些通用样式
写一个layout=300px，然后，哪里需要就为那个标签添加这个宽度的样式。
