CSS3 3 相對父元素的偽類

2022-02-26 00:54:02 字數 2376 閱讀 6769

a)之前學習的:a:hover  a:link  a:active  a:visited

b)以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類

f)e:first-child:查詢e這個元素的父元素的第乙個子元素e

g)e:last-child:最後乙個子元素

h)e:nth-child(n): 第n個子元素,計算方法是e元素的全部兄弟元素

i)e:nth-last-child(n): 同e:nth-child(n) 相似,只是倒著計算

j)e:nth-child(even): 所有的偶數

k)e:nth-child(odd): 所有的奇數

l)e:nth-of-type(n):指定型別

m)e:empty 選中沒有任何子節點的e元素,注意,空格也運算元元素

n)e:target 結合錨點進行使用,處於當前錨點的元素會被選中

o)重點說明:n遵循線性變化,其取值0、1、2、3、4、... 但是當n<=0時,選取無效

p)案例**:

/*第乙個li元素*/

li:first-child

/*最後乙個元素*/

li:last-child

/*獲取第10個元素*/

li:nth-child(10)

/*獲取倒數第3個li元素*/

li:nth-last-child(3)

/*獲取索引順序為6的倍數的li元素*/

li:nth-child(6n)

/*獲取所有索引為偶數的li元素*/

li:nth-child(even)

/*獲取前5個li元素*/

li:nth-child(-n+5)

c)n可是多種形式:nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等

li:first-child

li:last-child

如果在第乙個li前面加上div標籤,則第乙個不會有灰色底色,只認元素,不認li

改變第乙個和最後乙個li的字型顏色,之篩選li的父元素ul下的li元素

/*指定索引位置 nth-child(從1開始的索引||關鍵字||表示式)*/

/*偶數個元素新增背景  even:偶數  odd:奇數*/

同樣需要注意的是這樣的篩選依然是元素的篩選,並不是li標籤的篩選

當我在li前新增div標籤元素的時候,因為div不顯示,所以導致奇數偶數塊交換

同時第4個li的加粗也表明了div的存在

//這樣才是只篩選li元素的奇偶

/*想為前面的5個元素新增樣式*/

/*n:預設取值範圍為0~子元素的長度.但是當n<=0時,選取無效

CSS3 3種隱藏元素方法的區別

目錄dom結構 瀏覽器不會渲染display none的元素,並且不佔據頁面空間 事件監聽 無法對元素進行事件監聽 繼承 不會被子元素繼承 子元素設定display block不會顯示 改動 改動屬性值會引起頁面的重排和重繪 過渡 無法設定過渡效果transition display無效 不會被渲染...

CSS的偽元素和偽類

css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。常見偽類 hover,active,visited,focus。常見偽元素 first letter,first line,before,after,selection。before和 after下特有的content,用於在css渲染中向元素邏輯...

對html標籤 元素 以及css偽類和偽元素的理解

標籤 這應該都知道。等都是標籤。元素 標籤開始到結束。比如 p之間的內容 紅色部分就是元素。元素的內容 標籤開始到結束之間的部分,上述紅色部分中的 p之間的內容 這就是元素的內容。偽類 針對的是特殊狀態的元素。偽元素 針對的是元素的內容。比較偽類和偽元素 這裡用偽類 first child和偽元素 ...