实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*//选中父元素的第5个元素*/ div :nth-child(5){ color: #00aaaa; background-color: lightgreen; } /*//选中父元素的第二个元素，如果是li*/ li:nth-child(2){ color: #00aaaa; background-color: lightblue; } /*//选中父元素的第一个元素，如果是p执行下列样式*/ p:nth-child(1){ color: #00aaaa; background-color: lightpink; } p:nth-child(2){ /*选中父元素的第二个元素p标签，如果不是p标签则无效果 */ color: #00aaaa; background-color:lightcoral; font-size: 25px; } li:nth-child(3){ /* 选中父元素的第三个元素li标签，如果不是li标签则无效果,我们这里是li就有效果*/ color: #00aaaa; background-color: lightgrey; } :nth-of-type(3){/*//选中有同一类型有三个元素的第三个给背景色和字体颜色*/ color: #f0ecf7; background-color:lightsalmon; font-family: '楷体'; } form{ width: 600px; height: 800px; margin: 0px auto; } label,input{ width:250px; height: 20px; } input:first-of-type:focus{ background-color:lightcyan; color:lightsalmon; } input:nth-of-type(2):hover{ background-color:lightcyan; color:lightsalmon; } </style> <body> <div class="dox"> <ul> <p>标题一（第一个p标签），div下边第一个元素</p> <li>第一个li标签，div下边第二个元素</li> <li>第二个li标签，div下边第三个元素</li> <li>第三个li标签，div下边第四个元素</li> <li>第四个li标签，div下边第五个元素</li> <p>第二个P标签，div下边第六个元素</p> <p>第三个p标签，div下边第七个元素</p> <p>第四个p标签，div下边第八个元素</p> <b>第一个b标签，div下边第九个元素</b> <b>第二个b标签，div下边第十个元素</b> <b>第三个b标签，div下边第十一个元素</b> </ul> <form action=""> <label for="one">演示焦点伪类:</label> <input type="text" name="cc" id="one"><br> <p></p> <p></p> <label for="two">演示链接悬浮:</label> <input type="text" name="cc" id="two"> </form> </div> </body> </html>
运行实例 »点击 "运行实例" 按钮查看在线实例
<!--nth-child(n)选择器匹配属于其父元素的第 N 个子元素，不论元素的类型-->
<!--nth-of-type(n) 选择器，该选择器选取父元素的第 N 个指定类型的子元素 不指定的时候会选取页面上的所有拥有第n个的元素
切记空格的使用，不指定类型或者其他的时候不填，指定父类必须加空格-->伪类选择器使用起来更快速便捷，而且对用户更友好，使网站体验更好，
