CSS选取第n个标签元素
最近做一个项目,碰到这样的需求,需要选取某个元素的倒数第几个标签元素,想让他显示不同的样式
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个标签元素的更多相关文章
- 7.15 css与js 选择奇偶子元素的区别
js: 选取偶数位置的 <tr> 元素 $("tr:even") 选取奇数位置的 <tr> 元素 $("tr:odd") css 选取偶 ...
- CSS html标签元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>… ...
- CSS中html的标签元素分类
在CSS中,html中的标签元素大体被分为三种不同的类型: 块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- 常用HTML标签元素结合及简介
常用HTML标签元素结合及简介 <html></html> 创建一个HTML文档<head></head> 设置文档标题和其它在网页中不显示的信息< ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- CSS+DIV布局初练—DIV元素必须成对出现?
一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样 ...
- HTML标签元素分类(HTML基础知识)
HTML标签元素分类 一.按照块级元素还是行内元素分类 块级元素(block-level)和行内元素(inline-level,也叫作"内联"元素). a.块级元素(独占一行) 块 ...
随机推荐
- Linux显示指定区块大小为1048576字节
Linux显示指定区块大小为1048576字节 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ df -m 文件系统 1M-blocks 已用 可用 已用% 挂 ...
- Django学习-21-表关系参数
一对多关系 ForeignKey(ForeignObject) # ForeignObject(RelatedField) to, # 要进行关联的表名 to_field=None, # 要关联的表中 ...
- Monkeyscript---获取包名主界面名和位置坐标
一.monkey随机事件有三类:点击.输入.手势 二.Monkeyscript难点:如何获取坐标 三.Monkeyscript API: 1.轨迹球(手势)事件: DispatchTrackball( ...
- C#读取Excel表格中数据并返回datatable
在软件开发的过程中,经常用到从excel表格中读取数据作为数据源,以下整理了一个有效的读取excel表格的方法. DataTable GetDataTable(string tableName,str ...
- 关于C#委托的一些学习笔记
1.什么是委托就是把方法作为参数传给另一个方法.委托说指向的函数,必须和函数具有相同的签名(返回值和参数类型) Public delegate void DelSayHi(string name); ...
- TestLink和RedMine的集成
1. TestLink的安装 1.1. TestLink简介 TestLink是一个php语言开发的开源免费的测试管理工具,包括产品测试需求,测试计划,测试用例的创建和执行, ...
- 用css以写代码形式画一个皮卡丘
我的个人网站是通过写代码的形式来形成一个网站的,前一阵子在某个大神的github上看到他用写代码的形式来完成一个皮卡丘,于是心血来潮花了半个小时,也完成了一个作品. 这其中涉及到的知识点也不是很复杂, ...
- 配置maven环境出现ARP tomcat native library 版本安装跟需求版本不一致时的解决方法An incompatible version xxxx of the APR based Apache Tomcat Native library is installed, while Tomcat requires version xxxx
此地址下载你所需要的library版本http://archive.apache.org/dist/tomcat/tomcat-connectors/native/ 点击binaries 点win32 ...
- c++面试遇到问题
1. C 和 C++ 区别 2. const 有什么用途 主要有三点: 1:定义只读变量,即常量 2:修饰函数的参数和函数的返回值 3: 修饰函数的定义体,这里的函数为类的成员函数, ...
- javascript ES5、ES6的一些知识
ES6 标签(空格分隔): ES6 严格模式 "use strict" 注意:严格模式也有作用域,如果在某个函数内部声明的话,只在该函数内部有作用 1) 严格模式下全局变量声明必须 ...