支援CSS3 以上 用法::nth-of-type(n) 說明: n 為第幾個子元素, 依tag為第幾個子元素套用樣式 css定義: a Tag 為第二個子元素 則套用樣式 a:nth-of-type(2){ font-size: 20px; color: silver; } p Tag 為第四個子元素 則套用樣式 p:nth-of-type(4){ font-size: 20px; color: red; } 注意事項: 有分tag算第幾個子元素。 只要有父子關系,都會被定義。 不分tag參考:

程式: <!DOCTYPE html> <html> <head> <title>css3 Selector nth-of-type(n) 套用樣式</title> <meta http-equiv="Content-Type" content="text/html; charset=BIG5"> <style type="text/css"> a:nth-of-type(2){ font-size: 20px; color: silver; } p:nth-of-type(4){ font-size: 20px; color: red; } </style> </head> <body> <a href="#1">a tag test 1</a> <a href="#2">a tag test 2</a> <a href="#3">a tag test 3</a> <p>p tag test 1</p> <a href="#4">a tag test 4</a> <p>p tag test 2</p> <div> <a href="#1">div a tag test 1</a> <a href="#2">div a tag test 2</a> <a href="#3">div a tag test 3</a> <p>div p tag test 1</p> <a href="#4">div a tag test 4</a> <p>div p tag test 2</p> </div> </body> </html> 圖1:

測試結束~ 如果還不了解可參考:w3schools CSS Selector Reference 感謝~

 

 

其它文章

文章標籤
全站熱搜
創作者介紹
創作者 PG Levin Li 的頭像
PG Levin Li

程式開發學習之路

PG Levin Li 發表在 痞客邦 留言(0) 人氣(19)