CSS3::nth-child與:nth-of-type區別
阿新 • • 發佈:2017-06-24
css3選擇器 block lan strong title 選擇 示例 紅色 arc
一、:nth-child
1.1 說明
:nth-child(n)選擇器匹配屬於其父元素的第N個子元素,不論元素的類型。n可以是數字、關鍵詞或公式。
註意:如果第N個子元素與選擇的元素類型不同則樣式無效!
1.2 示例
<style> div>p:nth-child(2){ color:red; } </style> <div> <p>我是第1個段落</p> <p>我是第2個段落</p><!--符合條件:1、是<p>元素,2、父元素<div>的第二個元素。這裏被選擇,會變成紅色。--> <p>我是第3個段落</p> </div> <div> <p>我是第1個段落</p> <span>我是第1個文本</span><!--不符合條件:不是<p>元素,沒有被選擇--> <p>我是第2個段落</p> </div>
二、:nth-of-type
2.1 說明
:nth-of-type(n)選擇器匹配屬於父元素的特定類型的第N個子元素的每個元素。n可以是數字、關鍵詞或公式。
2.2 示例
<style> div>p:nth-of-type(2){ color:red; } </style> <div> <p>我是第1個段落</p> <p>我是第2個段落</p><!--符合條件:1、是特定元素類型<p>,2、是父元素<div>的第二個<p>元素。這裏被選擇,會變成紅色--> <p>我是第3個段落</p> </div> <div> <p>我是第1個段落</p> <blockquote>第1個引用</blockquote> <p>我是第2個段落</p><!--符合條件:1、是特定元素類型<p>,2、是父元素<div>的第二個<p>元素。這裏被選擇,會變成紅色--> <p>我是第3個段落</p> </div>
CSS3選擇器:nth-child與:nth-of-type區別
CSS3::nth-child與:nth-of-type區別