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. Linux多命令协作：管道及重定向

  2. 已成功与服务器建立连接，但是在登录前的握手期间发生错误。 (provider: SSL Provider, error: 0 - 等待的操作过时)

    今天忽然间发现远程连接别人数据库会出现  已成功与服务器建立连接,但是在登录前的握手期间发生错误. (provider: SSL Provider, error: 0 - 等待的操作过时)  这种情况 ...

  3. MVC 5.0(or5.0↓) Ajax.BeginForm 异步上传附件问题，答案是不能的！

    MVC 5.0(or5.0↓)  Ajax.BeginForm 异步上传附件问题,答案是不能的! (请注意我这里说的异步!) 来看一下下面这段一步提交file的代码 //前台 .cshtml 文件 & ...

  4. 从零开始学ios开发（十）：Multiview Applications（多个xib之前的切换）

    这篇学习的主要内容是Multiview,在我们学习iphone旋转的时候,介绍过多个view的使用方法,不过这里的view和旋转屏幕中所指的多个view是不同的,旋转屏幕中涉及到的多个view是在一个 ...

  5. 原生js实现仿window10系统日历效果

    舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒, ...

  6. Careercup - Facebook面试题 - 5179916190482432

    2014-05-01 00:45 题目链接 原题: input [,,,] output [,,,] Multiply all fields except it's own position. Res ...

  7. SignalR发布后不能生成signalr/hubs

    问题:代码写完后,在一台服务器上运行没有问题.换到另外一台服务器上,找不到signalr/hubs,显示404错误. SignalR版本:2.0.3 VS版本:2013 服务器:Windows Ser ...

  8. JavaScript string array 数组

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...

  9. c# XAML

    http://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh465340.aspx 如果你选择在 Microsoft Visual Basi ...

  10. win7下Chrome有两个图标的解决方法

    摘抄自:http://www.sevenforums.com/browsers-mail/238406-windows-7-taskbar-creating-double-google-chrome- ...