CSS中的nth-of-type如何使用

互联网 18-12-7

nth-of-type是一个获取一些适用项并应用样式的属性，它是从CSS 3添加的CSS选择器之一，:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，本篇文章我们就来具体说一下nth-of-type的用法。

如何使用nth-of-type？

我们先来看看nth-of-type的具体描述，注意“：”（冒号）在“nth - of - type（2n）”之前附加。

li:nth-of-type(2n){  }

（）内的“n”表示的是第几位，“2n”则表示是其是2的倍数

HTML代码

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8">     <title>CSS nth-of-type</title>     <link rel="stylesheet" type="text/css" href="sample.css">   </head>   <body>     <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>4</li>       <li>5</li>       <li>6</li>       <li>7</li>     </ul>   </body> </html>

CSS代码

li:nth-of-type(2n){   color: #5bc0de; }  li{   margin: 10px;   font-size: 120%; }

本篇文章到这里就全部结束了，更多相关的精彩内容可以移步到php中文网的CSS视频教程和CSS3视频教程栏目进一步的学习！！！

以上就是CSS中的nth-of-type如何使用的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： nth-of-type

CSS中的nth-of-type如何使用

相关资讯

标签推荐