作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与:last-child就遇到了失效的问题:

使用一个并列显示的不同尺寸的图片为例(如图)

初始代码为:

 <div class="catalog">
<a href="#"><img src="data:images/xiaomi-log.png"></a>
<a href="#"><img src="data: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;
}

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

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

选择器:first-child与:last-child失效的解决方法的更多相关文章

  1. margin-top失效的解决方法

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 我的是属于这种情况 按照网上的说法,我就是这个现象了 两个层box1和box2,b ...

  2. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  3. IE7的overflow失效的解决方法

    IE7的position:relative bug今天遇到了一个相对定位(position:relaitve)引起的IE7中overflow:hidden失效的bug,特此记录!解决方法很简单,给父层 ...

  4. ode.js 版本控制 nvm 和 n 使用 及 nvm 重启终端失效的解决方法

    今天的话题包括2个部分 node.js 下使用 nvm 或者 n 来进行版本控制 nvm 安装node.js 版本后,重启终端 node , npm 环境变量失效 第一部分 用什么来管理 node.j ...

  5. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  6. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  7. IIS上发布站点后URL重写失效的解决方法

    在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左 ...

  8. CentOS忘记密码修改方案以及centos卡在开机登录界面,命令失效的解决方法

    CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定 ...

  9. UEditor设置内容setContent()失效的解决方法

    ueditor常见用法: https://blog.csdn.net/qq_31879707/article/details/54894735#UE.Editor:setContent() UEdit ...

  10. 使用PullToRefreshListView时遇到Item点击事件失效问题 解决方法

    最近在自己的项目中使用到了以下开源项目: https://github.com/nanchen2251/pullToRefreshDemo 相关介绍博客如下: http://www.cnblogs.c ...

随机推荐

  1. java框架之SpringCloud(4)-Ribbon&Feign负载均衡

    在上一章节已经学习了 Eureka 的使用,SpringCloud 也提供了基于 Eureka 负载均衡的两种方案:Ribbon 和 Feign. Ribbon负载均衡 介绍 SpringCloud ...

  2. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  3. linux的查找命令 find whereis locate

    Linux 有三个查找文件的命令:find, whereis, locate 其中find 不常用,whereis与locate经常使用,因为find命令速度较慢,因为whereis与locate是利 ...

  4. oracle中实现某个用户truncate 其它用户下的表

    oracle文档中对truncate权限的要求是需要某表在当前登录的用户下,或者当前登录的用户有drop any table的权限. 但是如果不满足第一个条件的情况下,要让某用户满足第二个条件就导致权 ...

  5. kendo treeview checkbox初始化选中问题,没解决,暂时记录下

    想做带有checkbox的tree,由于项目一直用kendo ui for mvc,感觉 牛逼的kendo肯定有tree.结果碰到了选中的问题. 无法根据后台传来的IsChecked字段来设置  tr ...

  6. Sitecore系统教程即时查阅编辑内容

    实时模式中的Sitecore 作为开发人员,我们经常需要在本地环境中使用代码和内容.在本地,能够立即看到任何内容更改,以节省时间和提高效率是有意义的.这是在实时模式下运行Sitecore.默认情况下, ...

  7. DelayQueue源码解析

    DelayQueue是一个支持延时获取元素的无界阻塞队列.里面的元素全部都是“可延期”的元素,列头的元素是最先“到期”的元素,如果队列里面没有元素到期,是不能从列头获取元素的,哪怕有元素也不行.也就是 ...

  8. ListTile

    const ListTile({ Key key, this.leading, // item 前置图标 this.title, // item 标题 this.subtitle, // item 副 ...

  9. Shell cace条件语句

    cace条件语句,取相对应的多个值,进行输出. 语句:case语句:case $n in 回车\  值)回车\ 命令 :: 值)命令 esac case $1 in start) echo “启动” ...

  10. python从字符串中提取指定的内容

    有如下字符串: text=cssPath:"http://imgcache.qq.com/ptlogin/v4/style/32",sig:"OvL7F1OQEojtPk ...