CSS學習(二) 結構偽類選擇器 屬性選擇器

2021-07-10 04:59:33 字數 1884 閱讀 8479

一、理論:

1.結構偽類選擇器:

a.e:first-child:選擇第乙個子元素

b.e:last-child:選擇最後乙個子元素

c.e:root:選擇匹配元素e所在文件的根元素

d.e f:nth-child(n):選擇e的第n個子元素

e.e f:nth-last-child(n):選擇元素e的倒數第n個子元素

f.e:nth-of-type(n):選擇父元素內具有指定型別的第n個e元素

g.e f:nth-last-child(n):選擇第n個e元素

h.e:nth-last-of-type(n):選擇父元素內的倒數第n個e元素

i.e:first-of-type:選擇指定型別的第乙個e元素

j.e:last-of-type:選擇指定型別的最後乙個e元素

i.e:only-child:選擇父元素只包含乙個子元素,且該子元素匹配e元素

j.e:only-of-type:告訴父元素只包含同型別的子元素,且該子元素匹配e元素

i.e:empty:選擇沒有子元素的元素,且該元素不包含任何文字節點

2.結構選擇器中的n:

a.引數n為具體的數值

b.引數n為表示式"n*length","n+length","-n+length","n*length+b"

c.引數n為"odd"(奇數元素),"even"(偶數元素)

2.偽元素:

a.ie6-8僅支援單冒號表示法

b.::first-letter 選擇文字塊第乙個字母

c.::first-line 選擇元素的第一行文字

d.::before/::after 可以插入額外內容的位置

e.::selection 用來匹配突出顯示的文字

3.屬性選擇器:

a.e[attr]:選擇任意型別的元素

b.e[attr=val]:以屬性值為val選擇元素

c.e[attr|=val]:常用於lang屬性

d.e[attr-=val]:選擇了包括屬性及值的元素

e.e[attr*=val]:選擇任意位置包含val的元素

f.e[attr^=val]:選擇匹配元素以attr開頭的任何字串

g.e[attr$=val]:選擇以attr結尾的字串

4.css中常見的統配符:

a.^ 匹配起始符

b.$ 匹配終止符

c.* 匹配任意字元

二、實踐:1.

這是我的段落1

這是我的段落2

2.

i'm param 1

i'm param2

i'm test~

3.

#top 10

year

1the stand 1

1901

2the stand 2

1902

#top 10

year

1the stand 1

1901

2the stand 2

1902

3the stand 3

1903

4the stand 4

1904

5the stand 5

1905

6the stand 6

1906

4.

5.

12

3456

78910

css選擇器 偽類選擇器 屬性選擇器

偽類選擇器 nth of type index index 同型別兄弟元素中的排名 屬性選擇器 attr val attr 屬件名稱 val 屬性值 屬性選擇器 href val 表標屬性的結尾 屬性選擇器 class tap 表示屬的開頭 first child選擇第乙個 元素 nth of ty...

CSS偽類選擇器(結構偽類)

結構選擇器 獲去當前元素的第乙個子元素 li first child 結構選擇器 獲去當前元素的最後乙個子元素 li last child 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 li nth child 3 結構選擇器 選擇某個元素的乙個或者多個特定的子元素 從這個元素的最後乙個子元素...

屬性選擇器和結構偽類選擇器

e attr 選中e元素,且e元素有attr屬性 e attr value 選中e元素,且e元素有attr屬性,值為value e attr value 選中e元素,且e元素有attr屬性,包含值value e attr value 選中e元素,且元素有attr屬性,以value值開頭 e attr...