CSS選取第一個、最後一個、偶數、奇數、第n個標簽元素

来源:https://www.cnblogs.com/xuxiaoyu/archive/2019/09/20/11555069.html
-Advertisement-
Play Games

1、first-child first-child表示選擇列表中的第一個標簽。例如:li:first-child{background:#fff} 2、last-child last-child表示選擇列表中的最後一個標簽,例如:li:last-child{background:#fff} 3、nt ...


1、first-child

first-child表示選擇列表中的第一個標簽。例如:li:first-child{background:#fff}

2、last-child

last-child表示選擇列表中的最後一個標簽,例如:li:last-child{background:#fff}

3、nth-child(3)

表示選擇列表中的第3個標簽,例如:li:nth-child(3){background:#fff},代碼中的3也可以改成其它數字,如4、5等。想選擇第幾個標簽,就填寫幾。

4、nth-child(2n) 

這個表示選擇列表中的偶數標簽,即選擇 第2、第4、第6…… 標簽,例如:li:nth-child(2n){background:#fff}

5、nth-child(2n-1)

這個表示選擇列表中的奇數標簽,即選擇 第1、第3、第5、第7……標簽,例如:li:nth-child(2n-1){background:#fff}

6、nth-child(n+3)

這個表示選擇列表中的標簽從第3個開始到最後。

7、nth-child(-n+3)

這個表示選擇列表中的標簽從0到3,即小於3的標簽。

8、nth-last-child(3)

這個表示選擇列表中的倒數第3個標簽。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • css3過渡動畫速率用到的是三階貝塞爾曲線,曲線有四個點,p0,p1,p2,p3 有四個屬性: linear 規定以相同速度開始至結束的過渡效果(等於 cubic-bezier(0,0,1,1))。 ease 規定慢速開始,然後變快,然後慢速結束的過渡效果(cubic-bezier(0.25,0.1 ...
  • JS盒子模型屬性 在JS中通過相關的屬性可以獲取(設置)元素的樣式信息,這些屬性就是盒子模型屬性(基本上都是有關於樣式的) |屬性|值| |: |: | |client |top/left/width/height| |offset |top/left/width/height/parent| |s ...
  • 1 新建plugin.js,文件內容如下 2 在main.js中引入 至此,方式屬性已經全局引入,在vue頁面可以使用 ...
  • HTML是一種描述網頁的語言。全稱是Hyper Text Markup Language(超文本標記語言),是一種標記語言,由許多的標記標簽組成。 一 HTML標簽 1,簡介 HTML語言是由許多標簽組成,HTML 標簽是由尖括弧包圍的關鍵詞,比如 <html>。 HTML標簽都是小寫的。 HTML ...
  • 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。原文出處:https://blog.bitsrc.io/pure-html-widgets-for-your-web-application-c9015563af7a 在我們以往看到的頁面效果中,很多效果是需要 ...
  • 0920自我總結 關於hover與after,before已及first letter,first line的聯用 一.寫法 元素:hover::after{樣式} 元素:hover::before{樣式} 二.使用 元素:hover::after{樣式}與元素:after{content:'插入的 ...
  • 效果 效果圖如下 ​ ​ 實現思路 dom結構 按照實現思路,我們需要如下的dom結構 <div class="container"> <div class="cube-wrap"> <div class="cube"> <div class="front">front</div> <div cla ...
  • 最近,遇到複雜h5頁面開發,為了優化H5首屏載入速度,想到使用按需載入的方式,減少首次載入的JavaScript文件體積,於是將處理過程在這裡記錄一下,涉及到的主要是以下三點: 使用Webpack如何做按需載入 filename和chunkFilename的區別 如何命名chunk的名稱(webpa ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...