結構偽類選擇器

2021-08-03 19:58:07 字數 881 閱讀 6675

a)     first-child:用來選取結構中的第乙個元素,格式:結構名稱  匹配物件:first-child

b)    last-child:用來選取結構中的最後乙個元素,格式:結構名稱  匹配物件:first-child

c)     nth-child(編號):用來選取結構中正數第n個元素,格式:結構名稱   匹配物件:nth-child(編號)

d)    nth-last-child(編號):用來選取結構中倒數第n個元素,格式:結構名稱   匹配物件:nth-last-child(編號)

-------以上是針對只有乙個元素型別有多個時比較實用------- 例

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

e)    first-of-type:用來選取結構中的第乙個符合某型別的元素,格式:結構名稱   型別:first-of-type

f)     last-of-type:用來選取結構中的倒數第乙個符合某型別的元素,格式:結構名稱   型別:last-of-type

g)    nth-of-type(編號):用來選取結構中正數第n個符合某型別的元素,格式:結構名稱  型別:nth-of-type(編號)

h)    nth-last-of-type(編號):用來選取結構中倒數第n個符合某型別的元素,格式:結構名稱  型別:nth-;last-of-type(編號)

i)      注意:編號為odd時表示奇數,為even表示偶數 例

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

結構偽類選擇器

1.匹配父元素下面的第乙個子元素 匹配規則 父級選擇器 first child 需注意在選擇器後面有乙個空格 2.匹配父元素下面的最後乙個子元素 匹配規則 父級選擇器 last child 同樣需注意在選擇器後面有乙個空格 ul last child3,匹配指定的那個子元素 父級選擇器 nth ch...

結構偽類選擇器

1.結構偽類選擇器 e empty 選中e元素中內容為空的e元素,最終只會選擇到e元素,不會選擇到其他元素 root 選擇到根元素,在html中根元素就是html元素,所以 root html ul li ul div ul li empty root 不限定元素型別 父元素中的所有子元素都會參與計...

結構偽類選擇器

為選擇器新增一些特殊效果或者進行約束 1.當需要選中ul中的第乙個元素時 ul li aaa li li bbb li li ccc li ul ul li first child 2.當需要選中ul中的最後乙個元素時 ul li last child 3.按父類選擇單一元素 不建議 p text1...