屏幕快照 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，然后，哪里需要就為那個標簽添加這個寬度的樣式。
