选择器:first-child与:last-child失效的解决方法

Posted 2021-01-19 xiao-baobao

     作为还在努力练习的代码小白来说，有时类名或者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;
}

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

 

还在学习中的小白，如有不对欢迎指正！