權重問題:數選擇器的數量 id class 標籤
如果權重一樣,就以後設置的爲主
行內權重1000 > id 100 > 類 10 > 標籤 1
如果繼承來的屬性一樣近的話,就要數權重了
如果權重一樣,以後設置的爲主
繼承來的權重爲0,與選中的標籤沒有可比性
如果繼承來的屬性,就近原則,誰距離選中的標籤越近他的權重越高
css選擇器:
基礎選擇器
標籤選擇器
選中所有 找到共性的內容,不管標籤藏的有多深都可以選中的
類選擇器
選中所有,找的有共性 class可以多個重複的類名
<div class="box active" id="box"></div>
p class box
語法:.box{}
id選擇器
選擇唯一的標籤,因爲id是唯一的
語法:#box{}
通配符選擇器
選擇所有
語法:*{}
高級選擇器
後代選擇器
子代選擇器
組合選擇器
交集選擇器
僞類選擇器 -- 愛恨準則
設置小手狀態:cursor:pointer
沒有被訪問過的a的顏色
a:link{
color: yellow;
}
訪問過後的顏色
a:visited{
color: darkmagenta;
}
鼠標懸浮時候的狀態
a:hover{
color:darkgrak;
}
鼠標點擊時候的顏色
a:active{
}
讓父盒子.box下面的自標籤p設置屬性
.box:hover p{}
display:
inline:行內
block:標籤
inline-block:行內塊
flex:
none:讓盒子隱藏
僞元素選擇器
行高 = 盒子的高度--> 讓文本居中
有一些文本 屬性能夠被繼承下來:color、font-*、line-height、text-align
文本水平居中:text-align:center
文本垂直居中:line-height等於盒子的height