雷速体育视频直播无法加载:

您的位置:雷速体育答题测试答案 > div+css > css3偽類nth-last-child() 選擇器語法

css3偽類nth-last-child() 選擇器語法

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

 CSS3 :nth-last-child() 選擇器

先來看看一個實例:規定屬于其父元素的 倒數 第二個子元素的每個 p 元素

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

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

定義和用法

nth-last-child(n) 選擇器匹配屬于其元素的 倒數 第 N 個子元素的每個元素,不論元素的類型。

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

提示:可參閱 :nth-last-of-type() 選擇器,該選擇器選取父元素的 倒數 第 N 個指定類型的子元素。

實例

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

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

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

<style>
p:nth-last-child(odd){background:#f00;}
p:nth-last-child(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-child(2n){background:#f00;}
</style>
<p>第1個段落。</p>
<p>第2個段落。</p>
<p>第3個段落。</p>
<p>第4個段落。</p>

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

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

多行變色

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


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

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

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

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

{ganrao} 捕鱼达人最新版3安卓版下载 优乐江西抚州麻将下载 在家赚钱的可靠方法 星悦内蒙麻将ios 乐潮娱乐游戏金蟾捕鱼 快乐扑克任5 大众麻将的游戏规则 财神捕鱼打财神技巧 分分彩期期中毒胆公式 天天重庆麻将换三张 彩吧彩报第四版 博二肖二码 河南麻将朋友局官方免费下载 豪利棋牌游戏官网 如何利用手机网络赚 财神捕鱼输了几十万