CSS 选择器 :last-child与:last-of-type的区别
:last-child----represents the last element among a group of sibling elements.
CSS伪类 :last-child 代表在一群兄弟元素中的最后一个元素。
-
从代码和图可以看出:last-child选择了最后一个li标签。
同时,我们换另外一段代码,看看是否还有这样的效果。
从代码和图可以看出,:last-child并没有起到我们想要的作用。如果,这个时候去掉最后的div标签,再看看效果。
这时,效果出来了,那么,可以总结了。
:last-child表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效。
:last-of-type
关于:last-of-type手册中是这么解释的:
The :last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.
CSS伪类:last-of-type代表在一群兄弟元素中的最后一个指定类型的元素。
直接用上面两个栗子。
没有干扰元素,OK。
有干扰元素,OK。
:last-of-type表示其父元素下的最后一个指定类型的元素。
结尾
总结了一番,对于什么场景下使用:last-child和:last-of-type又了相应的认识,以后犯错的可能性就会降低了很多。
CSS 选择器 :last-child与:last-of-type的区别的更多相关文章
- css选择器,有箭头与没箭头的区别
div > span 和 div span 的区别 ,即有箭头和没箭头的区别 div > span span 是 div 的下一层级关系 在这种情况下找得到span元素: <div& ...
- css选择器学习(一)
1.通用选择器“*”和元素选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS选择器小结
在CSS3中是提倡使用选择器来将样式与元素直接绑定在一起的. 网页开发过程中,我们需要定义很多class来应用到不同的元素上,由于class本身是没有语义而且是可以复用的,所以过度使用class会使得 ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 总结30个CSS选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- 30个最常用css选择器解析(zz)
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
- CSS选择器及其优先级
一:一些普通的选择器 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...
- HTML+CSS学习笔记(8)- CSS选择器
标签:HTML+CSS 什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{ 样式; } 在{}之前的部分就是"选择器","选择器"指 ...
随机推荐
- Python与正则表达式[0] -> re 模块的正则表达式匹配
正则表达式 / Regular Expression 目录 正则表达式模式 re 模块简介 使用正则表达式进行匹配 正则表达式RE(Regular Expression, Regexp, Regex) ...
- poj2976(01分数规划)
poj2976 题意 给出 a b 数组,一共 n 对数,其中最多可以去掉 k 对,问怎样使剩下比率(原始比率是 $ \frac{\sum_{i=1}^{n} a}{\sum_{i=1}^{n} b} ...
- postgres基础知识
postgres是连接到具体的库: ./psql -U postgres 不指定库,默认就是用户名的同名库 ./psql -d chat -U postgres 指定chat库 pos ...
- 1· linux命令:查看依赖的共享库 - ldd命令
今天使用qt链接mysql的时候,发现提示driver not load 而出现此错误一般是没有mysql驱动的原因,但是qt5.4已经提供了mysql驱动的 查看plugins/sqldrivers ...
- 磁盘爆满导致MySQL无法启动:Disk is full writing './mysql-bin.~rec~' (Errcode: 28). Waiting for someone to free space...
今天收到监控邮件说博客访问失败.打开页面一看,硕大的502 Bad Gateway,ping了一下VPS发现是通的,SSH连接上去看了下Nginx日志发现没问题,重启lnmp的时候发现Mysql起不来 ...
- 获取SQLServer的最完整数据字典的SQL语句
原文:获取SQLServer的最完整数据字典的SQL语句 原创于2008年06月18日,2009年10月18日迁移至此. 获取SQLServer 的最完整数据字典的SQL 语句 其实网上已经流传了 ...
- u-boot-2015.01在tq2440上的初步移植
作者: 彭东林 邮箱: pengdonglin137@163.com QQ: 405728433 开发板: tq2440 工具: Win7 + VMware + Debian6 ...
- tq2440实验手册qt编译问题
转载:http://blog.sina.com.cn/s/blog_6182b82201015ym1.html 编译qtopia最好使用的是低版本的gcc和g++. 举个简单的例子在qtopia的源代 ...
- sharepoint2010新建网站与网站集
1.以管理员身份运行[sharepoint管理中心] 2.点击创建web应用程序 3.切换用户,我的个人用户不行,需要切换administrator用户 可以看到换成administrator账号 新 ...
- VBA Collection用法总结
Sub test() ' Dim s As Collection '定义s变量为集合对象 ' Set s = New Collection '初始化集合对象s (否则无法使用) Dim s As Ne ...