选择器: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伪类选择器用法可知：该选择器起作用的前提是被选取的元素为父元素的第一/最后一个子节点,前面什么兄弟标签都不能有；

根据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;
}