div p:nth-child(n) :找到div元素下面的第n个子元素 并且此元素类型为p 如果类型不是p则无效
div p:nth-of-type(n) :找到div元素下面的第n个p元素 (无论第一个p元素之前有多少个兄弟元素 此选择器只会从第一个p元素开始查找 应用场景:在一个大父元素中有很多子元素 但是只需要对第n个p元素进行选择的时候 一个一个数在第几个位置过于麻烦并且不现实)
<style> /* 选中box中第2个元素 */ .box p:nth-child(2){ background-color: red; } /* 直接选中box 下面第2个span类型的元素 */ .box span:nth-of-type(2){ display: inline-block; width: 20px; background-color: blue; } </style> </head> <body> <div class="box"> <p>1</p> <p>2</p> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> </body>
效果为:
如图 选中了box下的第二个子元素nth-child(2) 红色
直接选中了box下的第二个span nth-of-type(2) 蓝色 并不受前面有多少个p的影响
如果改为:
<style> /* 选中box中第2个元素 */ .box span:nth-child(2){ background-color: red; } /* 直接选中box 下面第一个span类型的元素 */ .box span:nth-of-type(2){ display: inline-block; width: 20px; background-color: blue; } </style>
那么会由于 .box 下面的第二个元素不是span 而是p 导致此选择无效
