屏幕快照 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，然后，哪里需要就为那个标签添加这个宽度的样式。