为什么选择器:last-child有时没有起作用?
想要有.list样式的最后一个不要下划线。
为什么:last-child没有起作用?
el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings);第二步,在同级元素中查找最后一个元素;第三步,检验最后一个元素是否与选择器 el 匹配。
.list:last-child 匹配到了 footer,但 footer 不匹配 .list,故选择器不生效。
1.可改成.list:nth-last-child(2)
2. 把所有.list标签用div包起来,保证最后一个子元素为.list
3.div .list:first-of-type{font-weight:blod}
这时候调试下就没问题了。
这里我们要理解下:first-child和:first-of-type 区别:
:first-child 指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来;
:first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。
为什么选择器:last-child有时没有起作用?的更多相关文章
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- CSS 后代选择器
后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...
- 对jQuery选择器的总结
jQuery基础选择器 $("div*")获取div下面的所有元素 $(".red,.green").html("怎么") // 需要注意的 ...
- HTML 学习笔记 CSS(选择器4)
CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...
- 【转载】Sencha Touch 提高篇 组件选择器
免责声明: 本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除. 原文作者:威老 原文地址:http://www.cnblogs.com/weil ...
- HTML+CSS学习笔记(8)- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
- CSS 中常用的选择器(选择符)
一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:l ...
- CSS基础知识笔记(二)之选择器
CSS选择器 选择器{ 样式; } 每一条css样式声明(定义)由两部分组成,形式如下: 在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元 ...
- CSS选择器之基本选择器总结
一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...
- 从零开始学习html(八)CSS选择器——下
六.子选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
随机推荐
- PHP JQurey
JQuery是用JS编写的程序,使用起来比JS更为简单,使用前需引入一个JQurey文件,下面为JQurey语法 <script type="text/javascript" ...
- java单例模式实现
1.最基本的单例模式 /** * @author LearnAndGet * @time 2018年11月13日 * 最基本的单例模式 */ public class SingletonV1 { pr ...
- [go]os.Open方法源码
file, err := os.Open("./buf.go") func Open(name string) (*File, error) { return OpenFile(n ...
- C#连接内存数据库redis【1、安装配置】
Redis是一个不错的缓存数据库,读取数据速度效率都很不错.今天大家共同研究下redis的用法.结合网上的资料和自己的摸索,先来看下安装与配置把. 咱们主要看在WINDOWS上怎样使用REDIS数据库 ...
- OpenStack 对接 Ceph 环境可以创建卷但不能挂载卷的问题
问题 环境:Nova.Cinder.Glance 都对接了 Ceph RBD 后端存储. 以往的操作包括上传镜像.创建卷.挂载卷都是一切正常的,但突然出现了无法挂载卷的问题,而且还是因为 Ceph 客 ...
- 工具类 分页工具类PageParamBean
自己编写的分页工具类,根据不同的数据库类型,生成对应的分页sql信息,分享给大家,希望大家共勉,工具类有些地方,大家可能不需要,请根绝自己的需要进行修改使用,核心逻辑都在,如果大家觉得有什么不妥,欢迎 ...
- python中接受上一条命令执行的结果----subprocess.check_output()
subprocess.call 是不能作为赋值的,需要用到 subprocess.check_output 函数,而且如果要引用赋值就必须使用subprocess.call(['echo',line] ...
- JS事件中级 --- 拖拽
http://bbs.zhinengshe.com/thread-1200-1-1.html 要求:实现div块的拖拽 原理:拖拽过程中鼠标点和div块的相对位置保持不变. 需要理解三点: 1. 为什 ...
- DateTime.UtcNow 协调通用时间(UTC)
1.协调通用时间(UTC) 2.本地时间和UTC时间相互转化 DateTime localDateTime = DateTime.Now;//本地时间 DateTime utcDateTime = D ...
- 微信小程序动画:高度渐变,left渐变
今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...