ele:nth-child是查找父元素下的子元素，包括子元素类型非ele的，当子元素类型不是ele时，则不会进行任何操作；
ele:nth-of-type是查找父元素下的子元素类型为ele的元素，其是按类型进行选择，只有元素类型是ele才能进行匹配。
同样的还有first-child与first-of-type、last-child与last-of-type。

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JS学习范例</title>

        <style>

            /*取出ul中每一个li前的空格，需要在ul中设置字体大小为0，再到具体的li中设置字体的大小*/

            ul{

                font-size: 0;

            }

            .item{

                border: 1px solid #ccc;

                padding: 15px;

                display: inline-block;

            }

            .item li{

                display: inline-block;

                border: 1px solid #ccc;

                padding: 2px;

            }

            .item li span{

                display: inline-block;

                text-align: center;

                width: 30px;

                height: 30px;

                line-height: 30px;

                border-radius: 15px;

                color: #0722AD;

                background-color: #D6B514;

                font-size: 15px;

            }

            /*nth-child只是在父节点的子节点标签，当子节点中有非指定的节点时，则跳过*/

            .item1 li:nth-child(3){

                background-color: lime;

            }

            .item2 li:nth-child(n + 6){

                background-color: lime;

            }

            .item3 li:nth-child(-n + 4){

                background-color: lime;

            }

            .item4 li:nth-child(4n + 1){

                background-color: lime;

            }

            .margin-item{

                display: inline-block;

                border: 2px solid #F18806;

                padding: 0;

                margin: 0;

            }

            .margin-item li{

                display: inline-block;

                margin-right: 3px;

            }

            .margin-item li span{

                display: inline-block;

                vertical-align: top;

                border: 2px solid #11A7A0;

                width: 100px;

                height: 30px;

            }

            /*nth-of-type只是在父节点的子节点中同类型标签*/

            .margin-item li:nth-of-type(5n){

                margin-right: 0;

                margin-bottom: 3px;

            }

            .margin-item li:last-of-type{

                margin-right: 0;

            }

        </style>

    </head>

    <body>

            <h1>nth-child(3)：选择某元素下的第三个元素</h1>

            <ul class="item item1">

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span>4</span></li>

                <li><span>5</span></li>

                <li><span>6</span></li>

                <li><span>7</span></li>

                <li><span>8</span></li>

                <li><span>9</span></li>

                <li><span>10</span></li>

                <li><span>11</span></li>

                <li><span>12</span></li>

                <li><span>13</span></li>

            </ul>

            <br/>

            <h1>nth-child(n + 6)：选择第6个元素之后的</h1>

            <ul class="item item2">

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span>4</span></li>

                <li><span>5</span></li>

                <li><span>6</span></li>

                <li><span>7</span></li>

                <li><span>8</span></li>

                <li><span>9</span></li>

                <li><span>10</span></li>

                <li><span>11</span></li>

                <li><span>12</span></li>

                <li><span>13</span></li>

            </ul>

            <br/>

            <h1>nth-child(-n + 4)：选择第4个元素之前的</h1>

            <ul class="item item3">

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span>4</span></li>

                <li><span>5</span></li>

                <li><span>6</span></li>

                <li><span>7</span></li>

                <li><span>8</span></li>

                <li><span>9</span></li>

                <li><span>10</span></li>

                <li><span>11</span></li>

                <li><span>12</span></li>

                <li><span>13</span></li>

            </ul>

            <br/>

            <h1>nth-child(4n + 1)：间隔3个选一个</h1>

            <ul class="item item4">

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span>4</span></li>

                <li><span>5</span></li>

                <li><span>6</span></li>

                <li><span>7</span></li>

                <li><span>8</span></li>

                <li><span>9</span></li>

                <li><span>10</span></li>

                <li><span>11</span></li>

                <li><span>12</span></li>

                <li><span>13</span></li>

            </ul>

            <br/>

            <h1>nth-child(5n)：每5个换行</h1>

            <ul class="margin-item">

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span></span></li>

                <li><span></span></li><br/>

                <li><span>1</span></li>

                <li><span>2</span></li>

                <li><span>3</span></li>

                <li><span></span></li>

                <li><span></span></li><br/>

                <li><span></span></li>

                <li><span></span></li>

                <li><span></span></li>

            </ul>

    </body>

</html>

CSS中nth-child和nth-of-type的简单使用的更多相关文章

  1. css中的毛玻璃（不是透明度） 简单文档

    其实毛玻璃很简单 只需要在css中加入 backdrop-filter:blur(8px); 8px是模糊力度 注意:使用该方法前需要设置背景不能是透明(如果是显示这个元素下面的图像记得半透明,例子就 ...

  2. CSS 中浮动的使用

    float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DO ...

  3. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  4. CSS 中区块的使用_宽高属性

    width 像素/百分比 区块的宽度 auto height 像素/百分比 区块的高度 auto min-height 像素像素/百分比 区块最小高度 auto max-height 像素像素/百分比 ...

  5. 关于CSS中的定位使用子绝父相（子类绝对位置和父类相对位置）

    关于CSS中的定位使用子绝父相(子类绝对位置和父类相对位置) 欢迎转发,但是请填写原博客地址https://www.cnblogs.com/JNovice/p/9536910.html  前言:最近在 ...

  6. CSS中各种长度单位总结

    在前端开发工作过程中曾碰到这样一问题: <style type="text/css"> .parent{ width:400px; height:300px; bord ...

  7. CSS中的偏僻知识点

    一.css中的calc 在CSS中有calc属性用于尺寸的计算,可以让百分比和像素值进行运算. div {width : calc(100% - 30px);} 为了兼容性 /*Firefox*/ - ...

  8. css 中相对定位和绝对定位

    1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...

  9. CSS中居中的完全指南（中英对照翻译）

    翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...

  10. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

随机推荐

  1. HMTL5的 video 在IOS7中碰到的坑

    直接说问题吧, 测试设备,ipod 我们在移动端播放视频的时候,一般使用H5的video标签,OK,这里有几点差异(就我目前所发现的)给大家分享一下, 1.在IOS7中,video元素是需要确定大小的 ...

  2. IDEA笔记

    快捷键: 查找类:ctrl + shif + R (eclipse)查找文件:double shift查找文件中的变量名和方法:ctrl + H (eclipse)system.out:输入 sout ...

  3. django - transaction

    def user_atomic(): User.objects.create(name='purk1', email='pwu1@maxprocessing.com') User.objects.cr ...

  4. linux 线程笔记

    线程与进程关键字对比 创建新流 fork/pthread_create 退出控制流 exit/pthread_exit 获取退出状态 waitpid/pthread_join 在退出时的清理工作 at ...

  5. OpenNMS架构介绍

    一.OpenNMS简介 OpenNMS的开发基于TMN及FCAPS这两个模型. 电信管理网络(TMN)是由 ITU-T 推荐 M.3000于1985年提出作为一种应用于电信服务供应商所持有的运营支持系 ...

  6. iTween基础之Rotate（旋转角度）

    一.基础介绍:二.基础属性 原文地址 :http://blog.csdn.net/dingkun520wy/article/details/50696489 一.基础介绍 RotateTo:旋转游戏物 ...

  7. JPA学习---第二节：JPA开发环境和思想介绍

    一.下载相关 jar http://hibernate.org/orm/ 下载 hibernate ,解压 http://www.slf4j.org/download.html 下载 slf4j,解压 ...

  8. Daily Scrum 11.12

    摘要:本次会议继续讨论程序的问题以及单元测试和集成测试,本次测试为终审,并且本次得到的为alpha版本的最终版本.本次的Task列表如下: Task列表 出席人员 Today's Task Tomor ...

  9. Visual Studio Code asp.net 5环境搭建技能Get

    启动准备阶段 预热 1 VS Code 官方地址:https://www.visualstudio.com/en-us/products/code-vs.aspx 2 安装Node.js :https ...

  10. C# 连接 Oracle 的几种方式[转]

    本文转自:http://www.cnblogs.com/storys/archive/2013/03/06/2945914.html 一:通过System.Data.OracleClient(需要安装 ...