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