作為還在努力練習的程式碼小白來說，有時類名或者ID名太多很容易就會搞混，為此，在練習中會想著借用多樣的選擇器來設定而不是每一個標籤都設一個類名（Id名），在此次練習中使用選擇器:first-child與:last-child就遇到了失效的問題：

 使用一個並列顯示的不同尺寸的圖片為例（如圖）

初始程式碼為：

 <div class="catalog">
           <a href="#"><img src="images/xiaomi-log.png"></a>
           <
 
a href="#"><img src="images/reaixiaomi.png"></a>
 </div>

.catalog a:first-child
{
    height:55px;
    width:55px;
}
.catalog a:last-child
{
    height:55px;
    width:130px;
}

結果就程式碼失效，並沒有預期中的效果；

為什麼沒有效果，通過瀏覽器除錯可知道，此刻的選擇器根本沒有選擇到對應的元素，所以兩張圖片還是初始的尺寸；

根據CSS  :first-child /:last-child偽類選擇器用法可知：該選擇器起作用的前提是被選取的元素為父元素的第一/最後一個子節點,前面什麼兄弟標籤都不能有；

這裡，我需要更改的是<a>中巢狀的<img>，而我的方法知識選擇了<a>而不是img，而又由於<a>標籤為內聯元素，是內聯元素時不能更改元素的尺寸的，只能通過自身內容撐大，所以此刻圖片為自身的初始尺寸；

正確的方法是選用第一個<a>之後的子元素<img>，故正確的CSS程式碼是：

.catalog a:first-child img
{
    height:55px;
    width:55px;
}
.catalog a:last-child img
{
    height:55px;
    width
 
:130px;
}

就能得到修改尺寸後的效果了；

還在學習中的小白，如有不對歡迎指正！