【css3】nth-child
nth-child含义
:nth-child(an+b)
这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值。
简单点说就是，这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素。
示例：
0n+3或简单的3匹配第三个元素。1n+0或简单的n匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本n和1n的匹配方式不一致。1n和1n+0是一致的，可根据喜好任选其一来使用。）2n+0或简单的2n匹配位置为 2、4、6、8...的元素。你可以使用关键字even来替换此表达式。2n+1匹配位置为 1、3、5、7...的元素。你可以使用关键字odd来替换此表达式。3n+4匹配位置为 4、7、10、13...的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。
换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。
另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。
nth-child应用
隔3行换色：
<!DOCTYPE html>
<html ng-app="myApp"> <head>
<meta charset="UTF-8">
<title>隔三行变色</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
ul{
list-style: none;
}
li:nth-child(6n){
background-color:red;
}
li:nth-child(6n-2){
background-color:red;
}
li:nth-child(6n-1){
background-color:red;
} </style>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('CourseCtrl', function ($scope, $http) {
$scope.items = [0,1,2,3,4,5,6,7,8,9,10];
});
</script>
</head> <body ng-controller="CourseCtrl">
<ul class="container ">
<li ng-repeat="item in items">{{item}}</li>
</ul>
</body> </html>
作者：smile.轉角
QQ：493177502
【css3】nth-child的更多相关文章
- 【CF438E】The Child and Binary Tree（多项式运算，生成函数）
[CF438E]The Child and Binary Tree(多项式运算,生成函数) 题面 有一个大小为\(n\)的集合\(S\) 问所有点权都在集合中,并且点权之和分别为\([0,m]\)的二 ...
- 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行
[微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...
- 【CSS3】Advanced3：Universal, Child, and Adjacent Selectors
1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...
- 【CSS3】 CSS3:弹性盒子（Flex Box）
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- 【CSS3】css3：box-sizing属性
本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围. 浏览器的支持情况 Browser Suppored Notes Internet Explorer Yes ...
- 【CSS3】 理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
- 【CSS3】CSS3：border-image的详解和实例
border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说 ...
- 【CSS3】 线性渐变
参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to ...
- 【CSS3】CSS3 滤镜实现
作者:^_^肥仔John 来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...
- 【CSS3】---:before :after生成内容
在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...
随机推荐
- ASPxGridView 选中主表一行数据，从表自动选中（勾选）对应的行
一.图解 下图为效果图,点击 [A表]种的某一行,[B表]会有与之相对于一行会被自动选中并且勾选上: 二.Html 代码 <html xmlns="http://www.w3.org/ ...
- H5新增特性、方法
1.FileReader和progress实现实时监控文件上传进度 2.HTML5新增的客户端校验 1.调用checkValidity方法进行校验 2.setCustomValidity自定义错误
- 学习 Docker 操作系统版本选择
近来有时间一直在捣鼓 Docker.因为服务器选择的是 CentOS 版本,所以实验的环境选择的一直是 CentOS.如果是个人玩 Docker,优先选择 ubuntu.如果需要选择 CentOS 的 ...
- 微信小程序使用wxParse，解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- 详解Vue.js 技术
本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...
- Android为TV端助力 am命令以及hotkey文件的编写
1.拨打电话:am start -a android.intent.action.CALL -d tel:10086 这里-a表示动作,-d表述传入的数据,还有-t表示传入的类型. 2. 打开一个网页 ...
- 如何在数据表当中找出被删掉的数据行ID
这个问题是一年前我刚步入IT行业的一个面试题,当时抓破头皮都想不到的问题,但现在回想过去自身不禁感到可笑,不多扯直接写解决方案.如何在数据表当中找出被删掉的数据行ID,意思是:在一堆的数据当中,让你找 ...
- 智能ERP 交接班统计异常的解决方法
请注意,有交接班统计数据不准确的需开启离线统计即可解决,交接班统计是按照结账时间来进行统计的 1.点击左侧导航栏中‘更多’-进入系统设置 2.进入营业设置后-开启离线统计-点击保存
- shell编程-函数（九）
每种语言都有自己的函数,shell也不例外.支持函数,它可以将脚本程序划分成一个个相对独立的代码块,使代码的模块化,结构更加清晰,并有效地减少程序的代码量,提高代码的复用率. 函数格式 functio ...
- 原生js :removeClass和addClass
function removeClass(obj, aClass) { var re = new RegExp('\\b' + aClass + '\\b'); if (obj.className ! ...