雷速体育视频一直加载中:

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

nth-of-type() 選擇器語法介紹

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

CSS3 :nth-of-type() 選擇器

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

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

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

定義和用法

:nth-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素.

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

提示:請參閱 :nth-child() 選擇器,該選擇器選取父元素的第 N 個子元素,與類型無關。

實例

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

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

在這里,我們為奇數和偶數 p 元素指定兩種不同的背景色:

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

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

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

多行變色

<style>
p:nth-of-type(3n){background:#00f;}
p:nth-of-type(3n-1){background:#f00;}
p:nth-of-type(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/3059.html

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

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

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

{ganrao}