在制作网页中经常会遇到一个父元素下多个子元素需要设置不同的样式，如何通过纯css来控制指定class或者id下的不同子元素的样式呢？可以参考下面的几种情况来使用：
选择器 | 说明 |
:nth-of-type(n) | 选择父级下的第n个子元素 |
:last-of-type | 选择父级下的最后一个子元素 |
:nth-child(n) | 选择父级下的第n个子元素 |
:nth-last-child(n) | 选择父级下的第n个子元素，从最后一个子项计数 |
:nth-last-of-type(n) | 选择父级下的第n个子元素，从最后一个子项计数 |
:first-child | 选择父级下的第一个子元素。 |
:last-child | 选择父级下的最后一个子元素。 |
在CSS中的使用方法：父元素 子元素：nth-of-type(n)；举例，把class=aa下面的第三个p标签文字设为红色，请看下面代码：
<!--举例：把class=aa下面的第三个p标签文字设为红色-->
<div class="aa">
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
<p>测试测试</p>
</div>
<style>
.aa p:nth-of-type(3){
color:red;
}
<style>以上代码运行效果图如下：
其他几个选择子元素的使用方法同上，大家多灵活变通下就可以了，如果你也遇到了类似的需求，就试试看吧。
如果内容有帮助，就点个赞吧！