为什么选择器: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" ...
随机推荐
- Java-GC 垃圾收集算法
程序计数器.虚拟机栈.本地方法栈随线程而生,随线程而灭. 栈帧随着方法的开始而入栈,随着方法的结束而出栈. 这几个区域的内存分配和回收都具有确定性,在这几个区域内不需要过多考虑回收的问题,因为方法结束 ...
- Fiddler抓包原理和使用详解
iddler抓包工具在APP开发过程中使用非常频繁,对开发者理解HTTP网络传输原理以及分析定位网络方面的问题非常有帮助.今天抽点时间出来总结一下Fiddler在实际开发过程中的应用. 我开发过程中使 ...
- ubuntu下如何检查nvidia显卡驱动是否安装OK?
答:使用sudo lshw -c video即可,笔者的输出如下: jello~$ sudo lshw -c video*-display description: VGA compatible co ...
- 一步一步搭建:spark之Standalone模式+zookeeper之HA机制
理论参考:http://www.cnblogs.com/hseagle/p/3673147.html 基于3台主机搭建:以下仅是操作步骤,原理网上自查 :1. 增加ip和hostname的对应关系,跨 ...
- Django-ORM之聚合和分组查询、F和Q查询、事务
聚合查询 聚合对查询的结果进行一步的计算加工. aggregate()是QuerySet 的一个终止子句 ,他的作用是,返回一个包含一些键值对的字典.键的名称是聚合值的标识符,值是计算出来的聚合值.键 ...
- PJzhang:微软出口管制条例
猫宁!!! 翻译:PJzhang 微软公司的技术,产品和服务受美国出口管理法规(EAR)的约束,由美国商务部工业与安全局(BIS)监督执行. 此外,财政部,国务院对其他与出口相关的技术和产品转让,交易 ...
- python开发工具-pycharm专业版
一.pycharm是什么 维基百科的定义: PyCharm是一个用于计算机编程的集成开发环境,主要用于Python语言开发,由捷克公司JetBrains开发,提供代码分析.图形化调试器,集成测试器.集 ...
- ctf网址,工具 汇总 组会
@双系统装kali,专门渗透的,ubantu要自己下工具,但是娱乐性比较好 @做题 i春秋 https://www.ichunqiu.com/battalion @网站 xctf近期赛事https:/ ...
- 【神经网络与深度学习】gflags介绍
gflags是什么: gflags是google的一个开源的处理命令行参数的库,使用c++开发,具备python接口,可以替代getopt. gflags使用起来比getopt方便,但是不支持参数的简 ...
- pyhton sort()无返回值
li3=['] li4=li3.sort()#sort是没有返回值得,打印的是none,对列表进行升序排列 print(li4) print(li3) 输出结果是None['123', '123', ...