選擇器:first-child與:last-child失效的解決方法

     作為還在努力練習的代碼小白來說，有時類名或者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;
}

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

 

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