<tr id="ublig"><code id="ublig"><delect id="ublig"></delect></code></tr>
  • <noframes id="ublig"></noframes>
    1. <output id="ublig"></output>

    2. <mark id="ublig"><rp id="ublig"></rp></mark>

      <sup id="ublig"></sup>

      css選中子元素中不是第一個元素的3種方法

      發布日期:2021年01月21日 瀏覽次數:11373 CSS 選擇器

      這里寫圖片描述

      第一種:使用偽類選擇器:not

      這里寫圖片描述

      <!DOCTYPE html><html lang="en"><head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              #od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
              #od div:not(:first-child){background:red;}
          </style></head><body>
          <div class="ob" id="od">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
          </div></body></html>1234567891011121314151617181920

      第二種:使用nth-of-type或者nth-child

      這里寫圖片描述

      這里寫圖片描述

      顧名思義,n是從0開始的,那么n+1自然就是從1開始了,以此類推n+3就是從第三個元素開始,同理如果選中單數元素那么就是2n+1,如果是想選中雙數元素,那么就應該寫成2n+2;具體情況可以根據項目情況使用。

      nth-of-type和nth-child 區別 這里寫的很明白 這里就不做介紹。

      <!DOCTYPE html><html lang="en"><head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              #od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
      
              /*#od div:nth-child(n+1){background:red;}*/
              #od div:nth-of-type(n+1){background:red;}
      
          </style></head><body>
          <div class="ob" id="od">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
          </div></body></html>1234567891011121314151617181920212223

      第三種:巧妙使用+兄弟選擇符

      這里寫圖片描述

      <!DOCTYPE html><html lang="en"><head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              #od div{float:left;height:100px;width:100px;margin:0 10px;background:#ccc;}
      
              #od div+div{background:red;}
          </style></head><body>
          <div class="ob" id="od">
              <div class="item">1</div>
              <div class="item">2</div>
              <div class="item">3</div>
          </div></body></html>123456789101112131415161718192021

      至于為什么+選擇符為什么可以呢?很簡單#od div+div選擇器,表示選中#od元素下面的所有后代div元素的兄弟元素,所以以此類推就選中了第二個元素以后的所有div元素了,為什么第一個沒有被選中呢?很簡單,第一個div元素前并有沒有一個兄弟元素,所以不可能被選中,所以就得到了想要的結果。




      延伸閱讀

      微信小程序各種圖表繪制

      在做應用系統開發的時候,我們經常需要繪制各種統計圖表。如何做呢?這篇文章給你一個思路參考。

      初識 客戶端js DDOS攻防

      我們將從"攻"和"防"兩方面與您一同梳理JavaScript DDoS: 攻擊:攻擊者如何通過惡意地址、服務器劫持、中間人等手段來實施DDoS攻擊。 防御:網站如何使用HTTPS和SRI(Subresource Integrity)等手段來避免攻擊。

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      百度編輯器上傳圖片能自動裁切圖片大小嗎? 這個我暫時不知道,不過作為應急辦法,可以暫時先設置圖片的最大寬度。如果哪位網友知道如何通過百度編輯器自動裁切壓縮圖片大小請告知,不勝感激。

      跨域資源共享 CORS 詳解

      CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。

      mysql 字符串截取

      數據庫開發過程中常用的字符串截取操作。

      dragsort:支持拖動排序js前端組建

      前端js拖拽排序組建, 看起來不錯. 收藏了.

      css選中子元素中不是第一個元素的3種方法

      前端開發中經常需要設置非第一個元素之外的樣式,這篇文章做一個總結. 需要的小伙伴歡迎查閱和分享.

      純 CSS 實現繪制各種三角形(各種角度)

      用CSS繪制三角形,這在前端開發過程中是比較常見的. 以前都是使用圖片代替, 當你看到這篇文章之后,也許以后遇到類似需求,就告別PS了.

      面向個體戶與個人的賬目小程序上線

      重點推薦給個體戶,個人家庭,個人合租用戶,臨時項目辦事等使用.用完即走,不轉內存, 可以多人合作記賬. AA記賬自動分賬. 單獨設置每個用戶的權限等非常實用的功能,大家合租的記賬隨時知道,統計功能也很強大,最重要是用起來很簡單,沒其他記賬產品那么復雜。

      廣西空中課堂在小程序發布視頻點播課

      覆蓋小學、初中、高中的12個年級的廣西中小學生“空中課堂”線上課程正式推出,而課堂小編輯選擇本公司小程序平臺發布,方便家中無法收視電視的同學方便使用手機端點播學習。
      亚洲综合憿情五月丁香五月网