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:
