作为还在努力练习的代码小白来说,有时类名或者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. 代码中特殊的注释技术——TODO、FIXME和XXX的用处(转)

    1.声明 本篇转自博客:http://blog.csdn.net/reille/ 2.转载内容 2.1.前言 今天在阅读 Qt Creator 的源代码时,发现一些注释中有 FIXME 英文单词,用英 ...

  2. java框架之Spring(1)-入门

    介绍 概述 Spring 是一个开放源代码的设计层面框架,它解决的是业务逻辑层和其他各层的松耦合问题,因此它将面向接口的编程思想贯穿整个系统应用.Spring 是于 2003 年兴起的一个轻量级的 J ...

  3. python基础(14)-反射&类的内置函数

    反射 几个反射相关的函数可参考python基础(10)-匿名函数&内置函数中2.2.4反射相关 类的一些内置函数 __str__()&__repr__() 重写__str__()函数类 ...

  4. Oracle 26表空间的管理

    一.查看用户表空间 熟悉与表空间相关的数据字典 查看用户的表空间 相关的数据字典:(用于查询数据库信息的数据库表)dba_tablespaces (管理员级别的表空间的描述信息) User_table ...

  5. CSS——background-size实现图片自适应

    在网页端,我们经常想让图片能够自适应拉伸缩放,使之可以完美的嵌入我们给定的容器里,比如div,button,input,下面我将用代码来说明如何实现这个功能! 一.div背景图自适应 如果知道图片都有 ...

  6. js实现打印

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. Docker Compose 创建yml 简单试例

    Docker Compose 创建yml 简单试例 Docker Compose 文件使用格式版本需要与Docker版本对应可在官网内查找 查找地址:https://docs.docker.com/c ...

  8. 面试常问Spring IOC,不得不会。

    广义的 IOC IoC(Inversion of Control) 控制反转,即“不用打电话过来,我们会打给你”. 两种实现: 依赖查找(DL)和依赖注入(DI). IOC 和 DI .DL 的关系( ...

  9. String.split()与StringUtils.split()

    我们平时进行简单的字符串分割的时候,尽量不要用String自身的split方法,它是匹配正则表达式的,如果遇到$这种特殊字符,需要转义一下.用StringUtils.split()方法会更方便 使用a ...

  10. JS设计模式(2)策略模式

    什么是策略模式? 定义:根据不同参数可以命中不同的策略 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使用:有许多种情况,而区分它们的只是他们直接的行为. ...