1.組合選擇器

群組選擇器

#每個選擇為可以位三種基礎選擇器任意一個，用逗號隔開，控制多個。

div,#div,.div{

    color:red

}

後代（子代）選擇器

.sup .sub{

    後代

}

.sup .sub{

    後代

}

.sup > .sub{

    子代

}

兄弟（相鄰）選擇器

.up~.down{

    兄弟

}

.up + .down{

    相鄰

}

交集選擇器

section.ss#s{

    標籤類名id名綜合修飾

}

2.複雜選擇器的優先順序

　　 1.與修飾符位置無關

 　　2.屬性選擇器與類選擇器權重相同

 　　3.id 無限大於 類[屬性]  無限大於 標籤

　　 4.權重只與個數相關，個數（型別）均相同時，最後由位置決定

3.偽類選擇器

　　連結標籤四大偽類

　　：hover(懸浮）| ：active(點選）

　　：link       |  visited

　　位置相關

　　：nth-child()  |  :last-child 先確定位置再匹配型別

　　：nth-of-type() 先匹配型別再確定位置

　　取反

　　選擇器：not(修飾詞)  |  div:not(:nth-child(2))

4.盒型別

　　margin + border + padding +content(width x height)

  　都具有自身區域

　　marigin參與佈局，不參與盒子顯示，其他都參與盒子顯示

　　border顏色自身定義，padding和content顏色都由背景色填充

　　#整體設定

　　padding:上 右  下 左（無邊取值對邊）

     #分開設定

　　padding-top: 10px;

　　padding-right: 10px;

　　padding-bottom： 10px;

　　padding-left:  10px;

　　#整體設定

　  border:  10px solid black;

     # 分開設定

　　border-top: 10px solid black;

　　border-reght: 10px solid black;

　　border-bottom: 10px solid black;

　　border-left: 10px solid black;

　　如何要保證顯示區域大小不變，增加padding和border，可以相應減小content的區別域

5.盒模型佈局

　　完成自身佈局：margin-left  |  margin-top

　　下移|右移： top取正值|left取正值

　　上移|左移： top取負值|left取負值

　　作為兄弟，上盒子的垂直佈局會影響下盒子的垂直方位，上盒子的結數為為下盒子的開始位置。