CSS3學習筆記 之 結構偽類選擇器

2021-06-25 08:07:25 字數 2376 閱讀 2180

結構偽類選擇器可以根據dom樹中元素的相對關係來匹配特定的元素,其語法如下:

選擇器功能描述

e:first-child

作為父元素的第乙個子元素的元素e。與e:nth-child(1)等同

e:last-child

作為父元素的最後乙個元素的元素e,與e:nth-lat-child(1)等同

e:root

匹配e元素所在文件的根元素。在html文件中,根元素始終是html,此時該選擇器與html型別選擇器匹配的內容相同

e f:nth-child(n)

選擇父元素e的第n個子元素f,其中n可以是整數(1、2、3)、關鍵字(even, odd)、可以是公式(2n+1、-n+5),而且n起始值為1不是0

e f:nth-last-child(n)

選擇n的倒數第n個子元素。次選擇器與e f:nth-child(n)選擇器計算順序剛好相反,但是使用方法都是一樣的,其中,:nth-last-child(1)始終匹配的是最後乙個元素,與:last-child等同

e:nth-of-type(n)

選擇父元素內具有指定型別的第n個e元素

e:nth-last-of-type(n)

選擇父元素內具有指定型別的倒數第n個e元素

e:first-of-type

選擇父元素內具有指定型別的第乙個e元素,與e:nth-of-type(1)等同

e:only-child

選擇父元素只包含乙個子元素,且該子元素匹配e元素

e:only-of-type

選擇父元素只包含乙個同型別的子元素,且該子元素匹配e元素

e:empty

選擇沒有子元素的元素,且該元素也不包含任何文字節點

瀏覽器支援:結構偽類選擇器在所有版本的ff, chrome,safari,opera,還有ie9及以上版本中支援。

結構偽類選擇器中,有四個偽類選擇器接受引數n:

:nth-child(n)

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

在實際應用中,這個引數可以是整數(1、2、3、4)、關鍵字(even,odd),還可以是公式(2n+1, -n+5),但是無論是整數關鍵字還是公式最終其值都是從1開始,而不是0.換句話說,當上述四個偽類選擇器中引數n的值為0(或者是負值)時,選擇器將選擇不到任何的元素。

可以將結構偽類選擇器中的引數按照常用情況分為七種情形:

1. 引數n為具體的數值

2. 引數n為表示式n*length

3. 引數n為表示式n+length

4. 引數n為表示式-n+length

5. 引數n為表示式n*length + b

使用如下的**測試結構偽類選擇器的使用:

顯示效果如下:

顯示效果如下:

下面我們將**修改為如下:

顯示效果如下:

即ul的第3個子元素變成了div,原來的第三個li元素成為了ul的第四個元素,且沒有哪個元素的背景顏色被設定為了綠色,從這個例子中我們可以看到ul > li :nth-child(3)代表的意思有如下兩層:

被選中的元素是:

1:ul的li子元素

2:此li元素為ul的第3個子元素

在增加了div的例子中,我們發現ul的第三個元素是div而並不是li,所以,這個選擇器沒有選中任何乙個元素,樣式也就失效了。

如果是想設定ul的第3個li元素的顏色,則可以使用nth-of-type選擇器,**修改為如下:

顯示效果如下:

即,雖然div是ul的第三個元素,但是現在變為了設定ul的第三個li子元素的背景顏色,ul的第三個li子元素是ul的第四個子元素,其背景顏色被設定成了綠色。

CSS3學習筆記 之 語言偽類選擇器

語言偽類選擇器對於多語言版本的 來說非常有用,可以根據不同語言版本設定頁面的字型風格。有兩種方法為文件指定語言,如果使用html5,直接可以設定文件的語言 另外一種方法就是手工在文件中指定lang屬性,並設定對應的語言值,例如 e lang language 表示選擇匹配e的所有元素,且匹配元素指定...

CSS3 結構偽類選擇器

選擇器作用 first child 匹配子集的第乙個元素 last child 匹配子集的最後乙個元素 nth child n 根據索引n匹配值 nth last child n 根據索引n匹配值,索引從最後乙個開始數 nth of type n 根據標籤type和索引n匹配值 nth last o...

css3結構偽類選擇器使用

結構偽類選擇器使用方法比如 e first child 匹配父元素中的第乙個子元素e 12 345 css ul li first child 如此寫就可以進行對父元素中的第乙個子元素進行選擇並且可以將第乙個子元素的字型顏色變成紅色 e last child 選擇父元素中的最後乙個子元素並進行更改 ...