總結下常用的nth child選擇符

2022-08-11 07:09:11 字數 1530 閱讀 2314

在前端程式設計中我們經常用到nth-child選擇符,它可以接受數值也可以接受odd,even等,今天翻閱精通css一書才想起它還可以接受乙個表示式,類似4n+1,-2n+1等。那他們各自具體有什麼用呢?適用的場景是什麼呢?可能大家還不是很清楚,下面我們來根據例項具體了解下,他們的html結構如下

123456

這個是很經常用到的變數,分別代表偶數和奇數

查閱瀏覽器也發現確實是跟我們預料的一樣,如下:

選擇單元素,元素根據給的數值來匹配,從1開始計數,應該是最為常見的,如下:

結果也是如我們所料的:

這個接觸的比較少,應該怎麼去處理呢?其實他也是很簡單的,只要把n從0開始計數,再計算整個表示式的值,匹配文件,如果沒有匹配成功的,則停止

例如nth-child(2n+1)是怎麼匹配現在的文件呢,當n=0,2n+1=1,存在則繼續匹配。n=1,2n+1=3,也存在,n=2,2n+1=5,還是存在,n=3,2n+1=7,此時已無法匹配成功了,所以起作用的元素應該是1,3,5行,讓我們看下瀏覽器結果是否如我們所料

果然只有1,3,5

那如果是-n呢,例如-n+2,其實也是類似的,當n=0,-n+2=2,存在繼續匹配,當n=1,-n+2=1還是存在,當n=0,-n+2=0不存在結束匹配,所以起作用的元素應該是1,2行,看下結果

,所以我們可以利用這個來匹配前幾個元素,當然你設計的表示式不同,匹配到的元素也是不同的『

:nth-of-type他的取值跟上面是類似的,那差別在哪呢?當頁面元素變得複雜得時候就可以看出來了,下面改下html結構,如下

a1

p1a2

p2a3

p3a4

p4

可以發現這裡面多了p標籤

當我們新增下列css樣式時會發生什麼呢?

我想很多人可能會說a2變紅變大,但其實是嗎?看下結果

結果就是毫無變化,為什麼呢?因為a:nth-child(2)指得是既是a標籤又是父元素中排第二的子元素,在我們的結構中,父元素中排第二的子元素應該是p1所對應的標籤。那麼要怎麼實現a2變紅變大呢?這裡就要引入容易混淆的a:nth-of-type(2),因為他指的就是既是a標籤又是父元素中在所有a元素裡排第二的子元素,那不就正和我意了?讓我們看下結果是否如我們所願?

正是我們所想

1.首先總結了nth-child的多種取值,注意單數值是從1開始計數,如果是數值表示式,n是從0開始計數

2.介紹了容易混淆的nth-of-type,nth-of-type是指在當前指定型別元素裡的排序,而nth-child是在所有元素之間的排序

Java常用關鍵字總結下

條件和迴圈 選擇結構 if if 判斷條件 else if 判斷條件 else switch switch 表示式 case default 迴圈結構 forfor 賦值初值 判斷條件 賦值增減量 迴圈次數未知 while while 迴圈條件判斷 迴圈次數可以控制 do do while 迴圈條件...

小結下常用的函式

mfc中wstring與string互相轉換 事實上stdlib.h中提供了更方便的函式 數字與字元的轉換 可以使用atoi atof將字元專程數字。而將數字轉字元除了可以使用sprintf c 還可以使用stringstream,比如乙個例子是 最後,如果要清空ss,只需要ss.str 即可。需要...

小小的總結下

tablename代表資料庫中的表 fieldname代表需要查詢的資料庫表中的列名 cond代表查詢的條件表示式,cond.getcondition 得到具體的表示式 查詢函式 condition類,構造條件表示式 expression類代表任意的乙個表示式 public class condit...