亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

CSS3 結構性偽類選擇器—nth-child(n)

“:nth-child(n)”選擇器用來定位某個父元素一個或多個特定的子元素。其中“n”是其參數,而且可以是整數值(1,2,3,4),也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even),但參數n的起始值始終是1,而不是0。也就是說,參數n的值為0時,選擇器將選擇不到任何匹配的元素。

經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時,其中n是從0開始計算,當表達式的值為0或小于0的時候,不選擇任何匹配的元素。如下表所示:

案例演示

  通過“:nth-child(n)”選擇器,并且參數使用表達式“2n”,將偶數行列表背景色設置為橙色。

HTML代碼:

<ol>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <li>item9</li>
  <li>item10</li>
</ol>?

CSS代碼:

ol > li:nth-child(2n){
  background: orange;
}

演示結果:

任務

在右邊CSS編輯器中第一行輸入正確的代碼,讓奇數行背景色變成綠色。

?不會了怎么辦

nth-child標簽是否書寫正確

||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?