[CSS3] :nth-child的用法
:nth-child(2)选取第几个标签,“2可以是你想要的数字”
.demo01 li:nth-child(2){background:#090}
:nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同
.demo01 li:nth-child(n+4){background:#090}
:nth-child(-n+4)选取小于等于4标签
.demo01 li:nth-child(-n+4){background:#090}
:nth-child(2n)选取偶数标签,2n也可以是even
.demo01 li:nth-child(2n){background:#090}
:nth-child(2n-1)选取奇数标签,2n-1可以是odd
.demo01 li:nth-child(2n-1){background:#090}
:nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一”
.demo01 li:nth-child(3n+1){background:#090}
:last-child选取最后一个标签
.demo01 li:last-child{background:#090}
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个
.demo01 li:nth-last-child(3){background:#090}
:nth-child的这些用法在实际中很用得着,不用单独给需要选取的标签加上ID或Class
[CSS3] :nth-child的用法的更多相关文章
- css3中user-select的用法详解
css3中user-select的用法详解 user-select属性是css3新增的属性,用于设置用户是否能够选中文本.可用于除替换元素外的所有元素,以下是user-select的主要用法和注意事项 ...
- 前端CSS3布局display:grid用法
前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...
- 前端CSS3布局display:flex用法
前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- CSS3 RGBA 属性高级用法
这个属性的兼容问题比较简单,IE8已经支持这个属性,IE6和IE7也可以通过hack支持.RGBA和CSS2里的RBG属性差不多,只是RGBA属性多了一个透明度的定义,CSS3标准里对RGBA属性的解 ...
- css3中webkit-box的用法
转自:http://www.frontopen.com/288.html 1.之前要实现横列的web布局,通常就是float或者display:inline-block; 但是都不能做到真正的流体布局 ...
- css3中webkit-box的用法(平分父元素)
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...
- css3 box-shadow 阴影的用法
text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着html5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset ...
- 简单介绍移动端CSS3单位rem的用法
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...
- CSS3——:nth-child选择器基本用法简述
注:n 是从1开始的 :nth-child 是 CSS3 提供的一个好用的选择器,因为在项目中经常用到,所以简单总结了它的常用方法 下面示例代码截图用的是同一个例子,p元素的父元素都是body p ...
随机推荐
- 单独运行shell脚本与crontab运行shell脚本的区别
crontab运行脚本存在两大问题:环境变量和路径,从而导致单独运行脚本没问题,但用crontab运行就报错. 1.环境变量 描述问题:crontab: usage error: no argumen ...
- Git进阶--你可能不知道的很好用Git功能
一.刚提交的代码,发现需要微调一下 刚刚最新提交了一段代码,然后跟前端说,接口好了.过了2分钟,前端跟你说,哎,兄弟,那个金额能不能返回整数,不要小数点. 这个时候一般我们通常会修改一下之后,再提交一 ...
- JavaScript中call,apply,bind方法
why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...
- 安装labelImg
上篇文章,我提到了安装这个工具时,遇到pyqt与sip版本不匹配的未解决问题,最后是通过windows版本一键实现的,工具包见下面链接. 参考:http://blog.csdn.net/jesse_m ...
- 【hdu3507】Print Article 【斜率优化dp】
题意 https://cn.vjudge.net/problem/HDU-3507 分析 斜率优化的模板题 #include <cstdio> #include <cstring&g ...
- input实时监听控制输入框的输入内容和长度,并进行提示和反馈
一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...
- 28-python 中格式对齐之中文格式对齐问题
一般的可以按这个搞,但是中文就会有问题: python基础_格式化输出(%用法和format用法) 对于 print('1234567890' * 10)print('%10s' % '今天好')pr ...
- Kafka命令行常用命令说明
基于0.8.0版本. ##查看topic分布情况kafka-list-topic.sh bin/kafka-list-topic.sh --zookeeper 192.168.197.170:2181 ...
- 20155230 2016-2017-2 《Java程序设计》第七周学习总结
20155230 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 世界时:在1972年引入UTC之前,GMT与UT是相同的 格林威治标准时间(GMT),现已不 ...
- RocketMQ 运维指令
1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等信息的管理 登录控制台 首先进入RocketMQ 工程,进入/RocketMQ/bin ...