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的更多相关文章

  1. 【CF438E】The Child and Binary Tree（多项式运算，生成函数）

    [CF438E]The Child and Binary Tree(多项式运算,生成函数) 题面 有一个大小为\(n\)的集合\(S\) 问所有点权都在集合中,并且点权之和分别为\([0,m]\)的二 ...

  2. 【微信支付】分享一个失败的案例 跨域405(Method Not Allowed)问题 关于IM的一些思考与实践 基于WebSocketSharp 的IM 简单实现 【css3】旋转倒计时 【Html5】-- 塔台管制 H5情景意识 --飞机 谈谈转行

    [微信支付]分享一个失败的案例 2018-06-04 08:24 by stoneniqiu, 2744 阅读, 29 评论, 收藏, 编辑 这个项目是去年做的,开始客户还在推广,几个月后发现服务器已 ...

  3. 【CSS3】Advanced3：Universal, Child, and Adjacent Selectors

    1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...

  4. 【CSS3】 CSS3:弹性盒子（Flex Box）

    Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...

  5. 【CSS3】css3：box-sizing属性

    本文介绍了css3中的box-sizing属性,在这之前读者需要预备知识width的范围. 浏览器的支持情况 Browser Suppored Notes Internet Explorer Yes ...

  6. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  7. 【CSS3】CSS3：border-image的详解和实例

    border-image简介 border-image是CSS3中的新特性.目前几乎所有的主流浏览器都已经支持该特性,详情请移步border-image的兼容性. border-image属性及使用说 ...

  8. 【CSS3】 线性渐变

    参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to ...

  9. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

  10. 【CSS3】---:before :after生成内容

    在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...

随机推荐

  1. Spider-two

    一.网络数据加密:1. md5 / sha1 不可逆加密算法: 结果是十六进制数, 结果不可逆, 多用于文件验证 import hashlib md5_obj = hashlib.md5() sha1 ...

  2. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  3. js中判断空及获取当前服务的根路径

    function isValue(o) { return (this.isObject(o) || this.isString(o) || this.isNumber(o) || this.isBoo ...

  4. Landsat数据下载方法小结

    本文转载自:http://malagis.com/landsat-data-download.html 本文介绍下载Landsat数据的方法. Landsat(美国陆地卫星)是遥感应用中常用的卫星数据 ...

  5. 如何用ABP框架快速完成项目(8) - 用ABP一个人快速完成项目(4) - 能自动化就不要手动 - 使用自动化测试(BDD/TDD)

    做为一个程序员, 深深知道计算机自动化的速度是比人手动的速度快的, 所以”快速”完成项目的一个重要武器就是: 能自动化就不要手动.   BDD/TDD有很多优势, 其中之一就是自动化, 我们这节文章先 ...

  6. 在Arcmap中加载互联网地图资源的4种方法

    前一段时间想在Arcmap中打开互联网地图中的地图数据,如影像数据.基础地图数据等,经过简单研究目前总结了四种方法,整理下与大家分享,有些内容可能理解有误,希望大家多多指教.4种方法如下: a)    ...

  7. JMeter 配置元件之HTTP Cookie Manager 介绍

    配置元件之HTTP Cookie Manager 介绍   by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1.   Cookie管理器介绍 Cookie Ma ...

  8. Android加载图片的策略

    实现图片缓存也不难,需要有相应的cache策略.这里我采用 内存-文件-网络 三层cache机制,其中内存缓存包括强引用缓存和软引用缓存(SoftReference),其实网络不算cache,这里姑且 ...

  9. 【linux】Can't connect to local MySQL server through socket和Plugin 'auth_socket' is not loaded报错

    真的是一次吐血的经历,弄了两个多小时才弄好. 问题1:直接登陆root用户报错 ERROR 2002 (HY000): Can't connect to local MySQL server thro ...

  10. 算法：输入一个链表，输出该链表中倒数第k个结点。

    算法:输入一个链表,输出该链表中倒数第k个结点.<剑指offer> 思路加到注释里面了: 1:两个if判断是否返回值为空,首个为空,没有第k个值: 2:for循环找到倒数第k个值,返回为a ...