CSS选择器：https://www.runoob.com/cssref/css-selectors.html
有以下<div>，类名class="abc"，想要选择第二个子元素 <p>修改样式
（下面样式都是以修改背景颜色为例）
<body>
<div class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </div>
</body>
CSS类选择器的写法是在类名class前面加 点号(.)，类名class="abc"的选择器就是 .abc
CSS可以使用伪类 :nth-child() 选择子元素，:nth-child()从1开始计数，所以第二个子元素就是:nth-child(2)
两个选择器之间加 空格(后代选择器) 代表后面的选择器是前面的后代（子代，孙代.....）
初步判断，要选择class="abc"的第二个子元素对应的选择器为 .abc :nth-child(2)
注意: .abc与:nth-child(2)之间有空格
<style> .abc :nth-child(2){ background-color:yellow; } </style>
CSS效果如下图，和预期效果不一样，不但<div>的第二个子元素变了，而且其中<ul>的第二个子元素<li>也变了
因为后代选择器(空格)不光选择了子代中的第二个<p>bbbbb</p>，
还选择了孙代中的第二个<li>eeeee</li>
修改方法1. 当前为后代选择器(空格)，此处我们要指定标签名，因为选择<p>标签，加上标签名写为 p:nth-child()
CSS选择器变为 .abc p:nth-child(2)
注意: .abc与p:nth-child(2)之间有空格
<style> .abc p:nth-child(2){ background-color:yellow; } </style>
修改方法2. 后代选择器(空格)修改为子代选择器(>)，这样就会只选子代了，不会选到孙代。
CSS选择器变为 .abc>:nth-child(2)
注意: .abc与:nth-child(2)之间是子代选择器(>)
<style> .abc>:nth-child(2){ background-color:yellow; } </style>
CSS效果如下图
是不是这样就完美解决了呢？
并不是，class是可以重复的，如果两个<div>有相同的class
( <hr/>是水平线，便于分辨两个<div> )
<body>
<div class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </div>
<hr/>
<div class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </div>
</body>
CSS效果如下图，两个相同class元素的第二个子元素都变了
如何修改呢？比如我想选择第二个class="abc"元素的第二个子元素
那么就要用伪类 :nth-of-type() 来选择是第几个父元素，:nth-of-type()从1开始计数，所以第二个父元素就是:nth-of-type(2)
CSS选择器变为 .abc:nth-of-type(2)>:nth-child(2)
<style> .abc:nth-of-type(2)>:nth-child(2){ background-color:yellow; } </style>
CSS效果如下图
现在仍不完美，因为伪类 :nth-of-type() 是按相同标签来计数的，如果有相同类名，但是标签不同就会出错。
比如下面有两个<div>，类名都是class="abc"；还有两个<ul>，类名也都是class="abc"
<body>
<div class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </div>
<hr/>
<div class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </div>
<hr/>
<ul class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </ul>
<hr/>
<ul class="abc"> <span>aaaaa</span> <p>bbbbb</p> <div>ccccc</div> <ul> <li>ddddd</li> <li>eeeee</li> </ul> </ul>
</body>
按照 .abc:nth-of-type(2)>:nth-child(2)
因为两个<div>和两个<ul>的类名都是class="abc"，而:nth-of-type(2)是根据标签计数，div标签数第二个，ul标签数第二个
所以第二个<div>的第二个子元素和第二个<ul>的第二个子元素都变了，效果如下图
如何修改呢？
指定父元素标签名，在 :nth-of-type() 前面加标签名。此处我们要选择<div>父标签，所以在前面加上标签名div
CSS选择器变为 div.abc:nth-of-type(2)>:nth-child(2)
<style> div.abc:nth-of-type(2)>:nth-child(2){ background-color:yellow; } </style>
CSS效果如下图。至此，可以说比较完善的解决了
附：
原生JS：
jQuery:
