首页 > 代码库 > CSS3 :nth-of-type() 选择器
CSS3 :nth-of-type() 选择器
定义和用法
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div p:nth-of-type(3){ 8 color:#fff; 9 background:#333;10 }11 </style>12 </head>13 <body>14 <div>15 <p>第一行</p>16 <p>第二行</p>17 <p>第三行</p>18 <p>第四行</p>19 <p>第五行</p>20 </div>21 </body>22 </html>
1.Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div p:nth-of-type(odd){ 8 color:#fff; 9 background:#333;10 }11 div p:nth-of-type(even){12 color:#fff;13 background:red;14 }15 </style>16 </head>17 <body>18 <div>19 <p>第一行</p>20 <p>第二行</p>21 <p>第三行</p>22 <p>第四行</p>23 <p>第五行</p>24 </div>25 </body>26 </html>
2.使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 div p:nth-of-type(3n+0){ 8 color:#fff; 9 background:#333;10 }11 </style>12 </head>13 <body>14 <div>15 <p>第一行</p>16 <p>第二行</p>17 <p>第三行</p>18 <p>第四行</p>19 <p>第五行</p>20 <p>第六行</p>21 </div>22 </body>23 </html>
CSS3 :nth-of-type() 选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。