屏幕快照 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的直接子元素，其中嵌套的層級就不算了，所以 沒有變?yōu)樗{(lán)色

屏幕快照 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

不是類，而是一種狀態(tài)
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

匹配該元素的父容器下?lián)碛型N類型的第一個元素

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