第五十六 css選擇器和盒模型
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取負值
作為兄弟,上盒子的垂直佈局會影響下盒子的垂直方位,上盒子的結數為為下盒子的開始位置。