:

您的位置:雷速体育答题测试答案 > div+css > CSS3 :nth-last-of-type() 選擇器介紹

CSS3 :nth-last-of-type() 選擇器介紹

時間:2018-10-25 10:49:10  來源:免費模板網 作者:風雪 閱讀次數 tagscss3偽類選擇器

本文介紹CSS3 :nth-last-of-type() 選擇器可以用在一些高亮的欄目里面 指定的位置添加樣式

先來看看一個實例:規定屬于其父元素的第二個 p 元素的每個 p,從最后一個子元素開始計數:

<style>
p:nth-last-of-type(2){background:#ff0000;}
</style>
<h3>這是標題</h3>
<p>第一個段落。</p>
<p>第二個段落。</p>

ps:所有主流瀏覽器均支持 :nth-last-of-type() 選擇器,除了 IE8 及更早的版本。

定義和用法

:nth-last-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素,從最后一個子元素開始計數。

n 可以是數字、關鍵詞或公式。

提示:請參閱 :nth-last-child() ,該選擇器選取父元素的第 N 個子元素,與類型無關,從最后一個子元素開始計數。

介紹

實例1:odd 和 even 奇數和偶數

odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞(第一個子元素的下標是 1)。

在這里,我們為奇數和偶數 p 元素指定兩種不同的背景色,從最后一個子元素開始計數:

<style>
p:nth-last-of-type(odd){background:#f00;}
p:nth-last-of-type(even){background:#0f0;}
</style>
<p>第1個段落。</p>
<p>第2個段落。</p>
<p>第3個段落。</p>
<p>第4個段落。</p>

實例 2:使用公式 (an + b)

公式 (an + b),表示周期的長度,n 是計數器(從 0 開始),b 是偏移值。

在這里,我們指定了下標是 2 的倍數的所有 p 元素的背景色,從最后一個子元素開始計數:

<style>
p:nth-last-of-type(2n){background:#f00;}
</style>
<p>第1個段落。</p>
<p>第2個段落。</p>
<p>第3個段落。</p>
<p>第4個段落。</p>

使用2n效果同odd和even奇數和偶數

<style>
p:nth-last-of-type(2n-1){background:#f00;}
p:nth-last-of-type(2n){background:#0f0;}
</style>
<p>第1個段落。</p>
<p>第2個段落。</p>
<p>第3個段落。</p>
<p>第4個段落。</p>

多行變色demo

<style>
p:nth-last-of-type(3n){background:#00f;}
p:nth-last-of-type(3n-1){background:#f00;}
p:nth-last-of-type(3n-2){background:#0f0;}
</style>
<p>第1個段落。</p>
<p>第2個段落。</p>
<p>第3個段落。</p>
<p>第4個段落。</p>
<p>第5個段落。</p>

我們就會想到這個不是在表格里面用的蠻多嗎?;卮鷲?br/>

我們可以擴展到表格里面td  tr設置隔行變色,這樣就不用像之前的變色加class的屬性了,保持代碼簡潔和語義化

本文地址://www.384142.live/bjrm/2018/1025/3058.html

猜你喜歡
欄目推薦
模板推薦

Copyright:雷速体育答题测试答案 www.384142.live 免費模板網 All Rights Reserved 雷速体育答题测试答案   遼公網安備 21010602000376號  遼公網安備:42900402000182號

免責聲明:本站部分資源來自互聯網收集,版權歸原創者所有,如果侵犯了你的權益,我們會及時刪除侵權內容,聯系QQ:1615187561 謝謝合作!

{ganrao} 上下分李逵劈鱼9900炮 互联网0成本暴利项目 免费做单赚钱软件 互联网金融行业赚钱 三码中特 欧洲足球锦标赛 新人注册送18元彩金 开元游戏官网 江苏体彩e球彩 免费精准5码中特 白城风雷麻将手机版 买南京好运麻将挂要多少钱 至尊宝友玩广西棋牌 36选7走势图福建 78捕鱼游戏中心手机版 重庆麻将下载手机版