[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 ...
随机推荐
- 与DispatcherServlet的 url-pattern配置问题
<!--当DispatcherServlet 的url-pattern配置成/ 访问不到静态资源 的解决方法1:使用Tomcat默认的Servlet解决 --> 在web.xml中加以下代 ...
- shared_ptr&scoped_ptr&weak_ptr
[RAII - Resource Acquisition Is Initialization] 获得一个资源的时候,不管这个资源是对象.内存.文件句柄或者其它什么,你都要在一个对象的构造函数中获得它, ...
- viewer.js--一个强大的jQuery图像查看插件
Viewer 是一款强大的 jQuery 图像浏览插件. 主要功能: 支持选项 支持方法 支持事件 支持触摸 支持移动 支持缩放 支持旋转 支持键盘 跨浏览器支持 查看演示 立即下载 部分插 ...
- leetcode 27 Romove element
描述: 删除指定元素.不是真的删除,要求把不符合的元素前移. 解决: 非常简单. int removeElement(vector<int>& nums, int val) { ) ...
- java高级工程师(三)
一.独白 之前也面试别人,现在轮到自己找工作,怎么说呢,每个面试官的看法不一样,面试的方式就不一样,比如我面试别人我喜欢问项目中他用到了那些,然后针对用到的技术去问一些问题,或者说对于某些场景的一些技 ...
- Rotate image and fit show use canvas
Description In the field of image processing, We always to show image after modified the image raw d ...
- S5PV210定时器
在S5PV210内部,一共有4类定时器件.这4类定时器件的功能.特征是不同的. 1.PWM定时器(1)这种是最常用的,平时所说的定时器一般指的是这个.像简单单片机(譬如51单片机)中的定时器也是这类. ...
- thinkphp整合系列之phpexcel导入excel数据
一:导入phpexcel /ThinkPHP/Library/Vendor/PHPExcel 二:导入excel的函数 /** * 导入excel文件 * @param string $file ex ...
- mongodb-win32-i386-3.0.6 使用
一.下载地址 https://fastdl.mongodb.org/win32/mongodb-win32-i386-3.0.6.zip 二.安装 1. systeminfo OS 名称: Micro ...
- InstaGAN: Instance-Aware Image-to-Image Translation