为什么选择器: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" ...
随机推荐
- jstack+jdb命令查看线程及死锁堆栈信息
如果程序挂死,有时使用jstack查看进程中线程信息时,需要添加上-F参数,此时如果有死锁信息,则可能不会打印出死锁堆栈信息,使用jdb则可以查看当前死锁线程的运行堆栈. 如下模拟一个简单的死锁程序 ...
- 发布Rest风格的WebService的SpringBoot极简例子
JDK:1.8.0_212 IDE:STS4(Spring Tool Suit4 Version: 4.3.2.RELEASE) 工程下载:https://files.cnblogs.com/file ...
- windos批处理启动redis与哨兵
为各个启动单独建立脚本后用总的bat调用 创建脚本,redis6379.bat脚本内容:@echo offtitle redis-serverset ENV_HOME6379="G:\Red ...
- adb shell am start -W查看APP启动时间(优化冷启动)
ThisTime:最后一个启动的Activity的启动耗时: TotalTime:自己的所有Activity的启动耗时: WaitTime::ActivityManagerService启动App的A ...
- View的事件机制
为了更好的研究View的事件转发,我们自定以一个MyButton继承Button,然后把跟事件传播有关的方法进行复写,然后添加上日志. import android.content.Context; ...
- openstack共享组件--memcache缓存(2)
一.缓存系统 一.静态web页面: 1.在静态Web程序中,客户端使用Web浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告 ...
- UFIDA
充分匹配了‘用友’的中文品牌的含义,即‘与用户真诚合作,做用户可靠朋友’.其中‘U’代表‘User’,即用户:‘FID’表示忠诚.信任,来源于 Fidelity(诚实)等英文词的词根:助音词‘A’放在 ...
- Django的下载与使用基础
下载安装 命令行 pip3 install django==1.11.23 -i https://pypi.tuna.tsinghua.edu.cn/simple pycharm file -- &g ...
- numpy的concatenate实现矩阵拼接
concatenate() 我们先来介绍最全能的concatenate()函数,后面的几个函数其实都可以用concatenate()函数来进行等价操作. concatenate()函数根据指定的维度, ...
- 简单的利用nginx部署前端项目
网上有很多教程写的一大堆东西,新手可能会有点看不懂,现在我写这篇文章是为了更好的帮助新手,如何将自己的前端项目部署到自己的服务器上. 首先我们必须要有一台自己的ubuntu服务器,如果没有可以去阿里云 ...