【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”.“ ...
随机推荐
- 大数据Spark与Storm技术选型
先做一个对比: 对比点 Storm Spark Streaming 实时计算模型 纯实时,来一条数据,处理一条数据 准实时,对一个时间段内的数据收集起来,作为一个RDD,再处理 实时计算延迟度 毫 ...
- js-string.js
//小结// string.charAt(pos) 返回string中pos所在位置的字符 var name = "Cynthia"; var i = name.charAt(0) ...
- K8S 高级调度方式
可以使用高级调度分为: 节点选择器: nodeSelector.nodeName 节点亲和性调度: nodeAffinity Pod亲和性调度:PodAffinity Pod反亲和性调度:podAnt ...
- pycharm最新code码，分享给大家
最新的pycharm激活码,到明年11月份,一名努力的Python程序员 这俩天,在忙学校布置的小项目,给大家更新少了,我会慢慢补上的,努力学pycharm,有什么问题可以问我哦,我竭尽所能帮大家解答 ...
- 如何用ABP框架快速完成项目(3) - 为什么要使用ABP和ABP框架简介
首先先讲为什么要使用ABP? 当然是因为使用ABP可以快速完成项目啦. 时间就是金钱, 效率就是生命嘛 有了ABP, 你就节省了写如下模块的时间: CRUD数据库基本操作 校验 异常处理 日志 权 ...
- ThinkPhp框架对“数据库”的基本操作
框架有时会用到数据库的内容,在"ThinkPhp框架知识"的那篇随笔中提到过,现在这篇随笔详细的描述下. 数据库的操作,无疑就是连接数据库,然后对数据库中的表进行各种查询,然后就是 ...
- OID的编解码（即在报文中的体现）
先上干货: 我们常见到OID的地方是SNMP和MIB,实际上理论上所有对象都可以有自己的ID.已存在的ID可以在http://www.oid-info.com/查到.这些ID在报文里并非字符串或直接的 ...
- HanLP汉语言分析框架
HanLP(Han Language Processing)是由一系列模型与算法组成的Java工具包,目标是普及自然语言处理在生产环境中的应用. HanLP具备功能完善.性能高效.架构清晰.语料时新. ...
- SQL Server的优化器会缓存标量子查询结果集吗
在这篇博客"ORACLE当中自定义函数性优化浅析"中,我们介绍了通过标量子查询缓存来优化函数性能: 标量子查询缓存(scalar subquery caching)会通过缓存结果减 ...
- SQL Server中sp_spaceused统计数据使用的空间总量不正确的原因
很多时候,我们经常使用sp_spaceused来查看表的空间使用情况,上个月群里有个网友说他使用DELETE删除了数据后,使用sp_spaceused查看,发现该表的分配的空间总量(reserved) ...