选择器: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;
}

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

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

原文地址:https://www.cnblogs.com/xiao-baobao/p/9945671.html

时间: 2024-10-07 05:09:52

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

项目记录:spring+springmvc 项目中 @Transactional 失效的解决方法

第一步,修改spring的配置文件和springmvc的配置文件 --------------------------------applicationContext.xml <context:annotation-config/>  <context:component-scan base-package="com.xxx"> <context:exclude-filter type="annotation" expression=&

【php】thinkphp以post方式查询时分页失效的解决方法

好久没有写博客了,最近说实话有点忙,各个项目都需要改bug.昨天晚上一直没有解决的php项目中的bug,就在刚才终于搞定,在这里还需要感谢博客园大神给的帮助! 具体问题描述 最近遇到一个非常棘手的问题,也是因为刚入手thinkphp.在做项目的过程中,因为需要非常多的查询条件,如果以get方式提交表单的话,会因为url长度限制而报错,所以必须使用post方式提交表单数据,但是在分页的过程中,遇到了问题,因为thinkphp自带的分页是以a标签的形式,进行下一页的,这样查询条件就没有传入后台,导致

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

这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下 如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将获得一个属性(attribute) ,它不改变该复选框被选中和选中.它只是用来存储默认或选中属性的初始值.为了保持向后兼容,.attr() 方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过 .prop(

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

在发布网站时URL重写有可能会失效,如果失效的话就需要您设置一下IIS:1.Windows XP系统或Windows 2003系统等使用以下方法:>打开IIS,主目录-〉配置-〉映射-〉在窗体左侧中部,点击“添加”a按钮进入“添加/编辑应用程序扩展名映射”窗体.>在“添加/编辑应用程序扩展名映射”窗体中设置:可执行文件-〉选择“C:\WINDOWS\Microsoft.NET\Framework\v4.0.50727\aspnet_isapi.dll”(和.aspx扩展名的可执行文件相同)&g

IE6下fixed失效的解决方法

在网上找了好久,终于找到一种亲测有效的解决方法. <!--[if IE 6]> <script type="text/javascript"> (function($) { jQuery.fn.Fixed = function(options) { var defaults = { x:0, y:0 }; var o = jQuery.extend(defaults, options); var isIe6 = !window.XMLHttpRequest; v

当有“Button1.Attributes.Add(&quot;onclick&quot;, &quot;return confirm(&#39;你确定要保存修改吗?&#39;)&quot;);”时,验证控件失效的解决方法

同一个页面用Js和服务器验证控件OnClientClick提交问题 实现功能:        点击Button按钮的OnClientClick事件,不会影响服务器验证控件的验证功能                                                (验证不通过,则不提交服务器页面)背景:       1. 在同一个页面有服务器验证控件(RegularExpressionValidator),多个       2. 有Javascript函数,实现验证和其他功能    

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

CentOS忘记密码修改方案 应用场景 linux管理员忘记root密码,需要进行找回操作. 注意事项:本文基于CentOS7.2环境进行操作的,由于CentOS的版本之间是有差异的,继续之前请先确定好版本 1.在启动GRUB菜单中选择编辑选项,按键  "e"  进入编辑模式 2.在里面找到 "ro"  将 "ro" 修改为 " rw init=/sysroot/bin/bash ": 修改后的内容如下: 3.修改完成之后,同

关于怎样用PHP及JS来动态加载html元素及加载的html代码绑定事件失效的解决方法!

首先编写好的html代码放入php文件里面设置请求头格式为text/html 然后呢我将用jquery来操作 先定义一个用了盛放代码的容器 $(function(){}) => window.onload .sn-header-bg 是我用来盛放代码的容器 我的php文件名是header.php放在data目录下! 执行以上代码完成后一个页头就出来了! 加载完成后我在header里面绑定了两个函数,但是全部失效了,原因是没找到对应的dom元素, 根本原因是我没加载完成之前这两个函数就已经执行去寻

IE8下String的Trim()方法失效的解决方法

String的Trim()方法失效,在ie8下是有这样的情况的,解决方法也很简单使用$.trim(str)即可,需要的朋友可以了解下 用jquery的trim()方法,$.trim(str)就可以了.

实际iOS编程中遇到的自定义导航栏按钮,导致手势返回失效的解决方法

1\在实际编程过程中往往需要自定义导航栏上面的按钮,也就用: - (instancetype)initWithCustomView:(UIView *)customView; 但用了这个方法后可能会导致iOS7,8的手势返回失效,解决方法就是在自定义的导航栏的viewDidLoad方法中添加如下代码 注意:只有用系统的导航栏,或者继承于系统的导航栏才可以用Push方法,并且自带返回手势. - (void)viewDidLoad { [super viewDidLoad]; __weak type