結構偽類選擇器

2021-09-12 21:42:26 字數 1285 閱讀 6841

1.匹配父元素下面的第乙個子元素

匹配規則:

父級選擇器 :first-child

需注意在選擇器後面有乙個空格

2.匹配父元素下面的最後乙個子元素

匹配規則:

父級選擇器 :last-child:

同樣需注意在選擇器後面有乙個空格

ul :last-child
3,匹配指定的那個子元素

父級選擇器 :nth-child()

注:(1)括號裡面指定的是那個子元素在父元素中的佔位值/索引值(索引值可看做第幾個元素)

(2)可以讓其指定倍數的變化

如:ul :nth-child(2n) 可以匹配ul下的偶數的子元素(2倍的子元素)

4.匹配空元素

匹配規則:

:empty

注:匹配到的元素中不能有任何東西(子元素,空格,文字等等),只能是首標籤和尾標籤緊緊相連的才能成功匹配

啦啦啦

5.匹配唯一子元素

匹配規則:

父級選擇器 :only-child

注:匹配的是父級選擇器下面只有乙個子元素的位址

燭花搖影,冷透書衾剛欲醒.待不思量,不許孤眠不斷腸

茫茫碧落.天上人間情一諾.銀漢難通,穩耐風波願始從.

span

div中的i

6.匹配第乙個字

匹配規則:

父級子元素:first-letter

人生若只如初見,何事秋風畫悲扇?等閒變卻故人心,卻道故人心易變

7.匹配第一行

匹配規則:

父級子元素:first-line

知己一人誰是?已矣.贏得誤他生.有情終古似無情.別語悔分明.

莫道芳時易度,朝暮.珍重好花天.為伊指點再來緣,疏雨洗遺鈿.

注:

(1)當前內容中有br 塊元素,這樣讓文字換行的

(2)當前文字的大小改變的時候後面的內容自動跳到下一行(可以自行改變瀏覽器的大小觀察字型變化)

結構偽類選擇器

a first child 用來選取結構中的第乙個元素,格式 結構名稱 匹配物件 first child b last child 用來選取結構中的最後乙個元素,格式 結構名稱 匹配物件 first child c nth child 編號 用來選取結構中正數第n個元素,格式 結構名稱 匹配物件 n...

結構偽類選擇器

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...