E:nth-last-child(n)
E:nth-last-child(n)
语法:
E:nth-last-child(n) { sRules }
说明:
- 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
- 该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中倒数第一个子元素E,那么选择符可以写成:E:nth-last-child(1)
- 有一点需要注意的是:
HTML示例代码:
<div><p>第1个p</p><p>第2个p</p><span>第1个span</span><p>第3个p</p><span>第2个span</span></div>
如上HTML,假设要命中倒数第一个p(即正数第3个p),那么CSS选择符应该是:
p:nth-last-child(2){color:#f00;}
而不是:
p:nth-last-child(1){color:#f00;}
因为倒数第1个p,其实是倒数第2个子元素。基于选择符从右到左解析,首先要找到第1个子元素,然后再去检查该子元素是否为p,如果不是p,则n递增,继续查找
假设不确定倒数第1个子元素是否为E,但是又想命中倒数第1个E,应该这样写:
p:last-of-type{color:#f00;}
或者这样写:
p:nth-last-of-type(1){color:#f00;}
参考 E:last-of-type 和 E:nth-last-of-type(n)
E:nth-last-child(n)的更多相关文章
- 【ToolKit】轻量级JS库
优点: 丢弃了一些不常用的方法(jQuery.fn):slideUp.fadeIn.animate等: 新增获取子节点的方法(ToolKit.fn):firstChild,lastChild等: 新增 ...
- jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...
- Python之路【第十八章】:Django基础
Django基本配置 Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Se ...
- 网页播放器(jsp、js)
jsp对控件显示 <%@ page language="java" import="java.util.*" pageEncoding="UTF ...
- sizzle源码分析 (4)sizzle 技术总结及值得我们学习的地方
分析sizzle源码并不是为了去钻牛角尖,而是去了解它的思想,学习下期中一些技术的运用. 1,sizzle中的正则表达式jquery源码中充斥着各种正则表达式,能否看懂其源码的关键之一就是对正则表达式 ...
- sizzle源码分析 (1)sizzle架构
sizzle是jquery的核心,它用来选择匹配的元素,其代码包含在一个匿名函数中,并以window作为其上下文环境: (function( window, undefined ) { //此处为si ...
- 双日历插件--jq datepicker时间范围选择
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- jquery 计算输入的文本的utf-8字节长度
jquery-2.1.1.min.js /*! jQuery v2.1.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license ...
- 5JS树形结构菜单和jQuery版
第一版JS版HTML: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- javascript脚本化文档
1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...
随机推荐
- Python21之内嵌函数和闭包
一.内嵌函数 内嵌函数指的是在一个函数体内部定义的函数,可以称它为函数的函数,也就是子函数,外部的函数称之为母函数,就类似局部变量和全局变量 子函数体内定义的变量只在其函数内部有效,但其内部可以调用母 ...
- 题解 CF1216B 【Shooting】
题目大意:给你n个数,让你找到一种排列方式,使得$\sum\limits_{i=1}^{n}a[i]*(b[i]-1)$($b$为$a$的一种排列)最小 应该可以一眼看出是贪心,因为大的放前面先射击一 ...
- sendmail邮箱部署设置
前言:在使用一些shell脚本进行监控时需要通过发送报警邮件来提醒,下面通过部署简单的sendmail来实现简单的邮件发送. 1.安装 mailx 和 sendmail: yum install ma ...
- Django框架学习易错和易忘点
一.get在几处的用法 1.获取前端数据 request.POST.get('xxx') #当存在多个值时,默认取列表最后一个元素:所以当存在多个值时,使用getlist 2.获取数据库数据 mode ...
- WUSTOJ 1325: Distance(Java)坐标计算
题目链接:1325: Distance Description There is a battle field. It is a square with the side length 100 mil ...
- IDEA使用技巧--将本地项目和git远程项目关联
之前开发没有从头儿搭建过新项目,都是从IDEA配置下项目的git地址,pull代码之后进行开发,提交.这次需要将本地新建的项目push到在git上同样是新建的空项目上去(git上的项目只有工程名和re ...
- Centos6 Connect WiFi
Centos6 Connect WiFi // 安装 wireless tools yum install wireless-tools dkms pciutils lsusb // 使用wlan命令 ...
- css中哪些属性会脱离文档流
一共有三个属性会使元素脱离文档流: (1)浮动 (2)绝对定位 (3)固定定位 元素脱离文档流会导致父元素高度塌陷,要修复高度塌陷问题,可以将子元素与父元素放在同一个BFC中
- html+css+javascript网页制作技巧总结1
(一)div.元素居中中显示方法: 1.宽度要有实际值或百分比值 2.margin:0px auto; 文本内容居中显示的方法: 1.text-align:center; 2.line-height: ...
- js入门之对象
一.对象理解 现实世界 万物皆对象, 一切事物都是对象 对象还是一个具体的事物 对象: 特征和行为组成 特征是名词 用来描述对象的, 行为是动词 程序中的对象 是对现实世界中事物的抽象 1. js中的 ...