最近做一个项目,碰到这样的需求,需要选取某个元素的倒数第几个标签元素,想让他显示不同的样式

1、first-child

first-child表示选择列表中的第一个标签。例如:li:first-child{background:#fff}

2、last-child

last-child表示选择列表中的最后一个标签,例如:li:last-child{background:#fff}

3、nth-child(3)

表示选择列表中的第3个标签,例如:li:nth-child(3){background:#fff},代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。

4、nth-child(2n) 

这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签,例如:li:nth-child(2n){background:#fff}

5、nth-child(2n-1)

这个表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签,例如:li:nth-child(2n-1){background:#fff}

6、nth-child(n+3)

这个表示选择列表中的标签从第3个开始到最后。

7、nth-child(-n+3)

这个表示选择列表中的标签从0到3,即小于3的标签。

8、nth-last-child(3)

这个表示选择列表中的倒数第3个标签。

CSS选取第n个标签元素的更多相关文章

  1. 7.15 css与js 选择奇偶子元素的区别

    js: 选取偶数位置的 <tr> 元素 $("tr:even") 选取奇数位置的 <tr> 元素 $("tr:odd") css 选取偶 ...

  2. CSS html标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.  常用的块状元素有: <div>.<p>.<h1>… ...

  3. CSS中html的标签元素分类

    在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素.    常用的块状元素有:  <div>.<p>.<h1&g ...

  4. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  5. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  6. 常用HTML标签元素结合及简介

    常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...

  7. HTML+CSS学习笔记(2) - 认识标签(1)

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. CSS+DIV布局初练—DIV元素必须成对出现?

    一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...

  9. HTML标签元素分类(HTML基础知识)

    HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...

随机推荐

  1. Javascript和JQuery中常用的随机数产生函数

    无论在普通Js框架或者JQuery中都可以使用的,函数如下,使用方法简介: 1)获取0-100的随机数--getRandom(100); 2)获取0-999的随机数--getRandom(999); ...

  2. JSP常见的三个编译指令

    JSP常见的三个编译指令 1.page指令   是针对当前页面的指令 2.include指令    用于指定包含另一个页面 3.taglib指令    用于定义和访问自定义标签

  3. eclipse和android studio的爱恨情仇

    Eclipse,以下简称ES(自己起的,不喜勿喷):Android studio,以下简称AS(都这么叫的啦)! 2000年,IBM怀胎24个月,终于产生了Eclipse,当时ES的诞生只是为了解决I ...

  4. C# 找出泛型集合中的满足一定条件的元素 List.Wher()

    在学习的过程中,发现泛型集合List<T>有一个Where函数可以筛选出满足一定条件的元素,结合Lambda表达式使用特别方便,写出来与大家分享. 1.关于Func<> Fun ...

  5. Python--urllib3库详解1

    Python--urllib3库详解1 Urllib3是一个功能强大,条理清晰,用于HTTP客户端的Python库,许多Python的原生系统已经开始使用urllib3.Urllib3提供了很多pyt ...

  6. Mac上使用虚拟机搭建Hadoop集群

    一. mini安装一台centos到虚拟机上 安装过程参考这篇博客http://www.linuxdown.net/install/setup/2015/0906/4053.html 二. 修改网络配 ...

  7. Luogu 3375 【模板】KMP字符串匹配(KMP算法)

    Luogu 3375 [模板]KMP字符串匹配(KMP算法) Description 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来 ...

  8. [BZOJ4825][HNOI2017]单旋spaly

    BZOJ Luogu 题目太长了,就不放了. 题解 首先声明一点,无论是splay还是spaly,插入一个新的元素,都要rotate到根!所以说题目也算是给了一个错误示范吧. 我们发现把最值旋转到根并 ...

  9. LightOJ1282 Leading and Trailing

    题面 给定两个数n,k 求n^k的前三位和最后三位 Input Input starts with an integer T (≤ 1000), denoting the number of test ...

  10. C#多线程之异步编程

    c#中异步编程,主要有两种方法: 1.委托的异步调用: 2.Task的await,async (c# 4.5) 我们来看例子: /// <summary> /// 异步保存网页,url:网 ...