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>

【css3】nth-child

nth-child含义

nth-child应用

猜你喜欢