CSS-結構選擇器和僞類僞元素

1.結構選擇器

1.後代選擇器:可以選擇一個元素的後代元素,包括兒子孫子

2.子元素選擇器:通過某一個元素選中直接後代元素

3.並選擇器:將相同的樣式放在一起,類名直接用英文逗號分隔。

4.通配符選擇器:*可以選中頁面所有的標籤。

注意:通配符選擇器對頁面所有的元素都會設置對應的樣式,而實際上有很多元素默認是不帶任何的樣式的。

5.兄弟選擇器:E+F:選中最近的一個“弟弟”元素,不選中自己

       E~F:選中所有的“弟弟”元素,不選中自己

2.僞類和僞元素

僞類:僞類選擇元素基於的是元素的特性,由於狀態是動態變化的,所以一個元素達到一個特定狀態時,它就會得到一個僞類的樣式;當狀態改變時,它又會失去這個樣式。

它的功能和class有些類似,但它是基於文檔之外的抽象,所以叫僞類。


僞元素:設計僞元素的目的:僞元素是對元素中的特定內容進行操作,去選取諸如元素內容第一個字(母)、第一行,選取某些內容前面或後面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的,但是它本身只是基於元素的抽象,並不存在於文檔中,所以叫僞元素。


定位相關複習

(1)文檔流:就是HTML的佈局機制。塊元素(block)獨佔一行,內聯元素(inline)不獨佔一行。

(2)相對定位:就是相對於一個東西來定位。這個東西就是他本身。同時可以使用left、top、bottom、right來移動元素的位置。

注意:相對定位不會脫離文檔流。

(2)絕對定位:找一個東西相對來絕對定位。這個東西有時什麼呢!這個東西(element)必須設定position,並且定位方式非 static。再說直白一點。這個小鬼(element)定位可以是他爸爸、他爺爺、他太公。。。。(祖宗,body)中有錢(position: absolute)的或者當官的(position: relative,fixed),就是不能是程序員(position: static或直接沒有寫定位)。

注意:絕對定位脫離文檔流。一般使用“父相子絕”。

使用絕對定位設置top:0 和不設置top屬性他們有區別麼?

有區別。如果沒有設置top屬性。元素的位置和沒有脫離文檔流的位置一樣。

(3)fixed定位:就是相對於瀏覽器窗口的定位。

 注意:使用了postion 屬性,一般不使用margin,padding屬性。





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章