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. LR通过SiteScope监控mysql

    SiteScope下载,安装 要想使用LoadRunner监测MySQL数据库的性能,LoadRunner没有提供直接监测 MySQL的功能,所以,我们需要借助sitescope监控,然后在LoadR ...

  2. 如何在java类中读取Properties配置文件

    在com.example包下有一个test.properties文件和测试类PropertyReadTest.java. test.properties 文件内容: author=zeige  tea ...

  3. 万能的SQLHelper帮助类

    /// <summary> /// 数据库帮助类 /// </summary> public class SQLHelper { private static string c ...

  4. 【Qt】QSettings介绍【转】

    简介 QSettings类提供了持久的跨平台应用程序设置. 用户通常期望应用程序记住它的设置(窗口大小.位置等)所有会话.这些信息通常存储在Windows系统注册表,OS X和iOS的属性列表文件中. ...

  5. Berkeley DB数据处理

    设计一个结构,利用Berkeley DB完成大数据的存储,备份,查询功能. 已有的储备: 1.Berkeley DB的基本操作. 2.数据转存后数据不丢失. 3.过百GB以上数据的存储. 数据流如下, ...

  6. Android SDK 更新失败

    万恶的墙,调查兵团赶紧把墙拆了.大家一起跟巨人打一架. 解决方法是改hosts文件 添加 74.125.237.1 dl-ssl.google.com ok,good job 多亏了http://bl ...

  7. 说Win7激活

    今天晚上给电脑来了个强制关机,后来打开后提示我,该Windos不是正版,顿时无语.诺,看下图:我的桌面也全部变成黑色了…… 后来一想……哦,应该是我的安装光盘里的激活工具激活的不彻底,或者说只是给我激 ...

  8. django post分号引发的问题

    利用jquery的ajax传值 $.ajax({ type:"POST", url:"", data:"content"=content, ...

  9. 测试驱动开发实践 - Test-Driven Development

    一．前言 不知道大家有没听过“测试先行的开发”这一说法,作为一种开发实践,在过去进行开发时,一般是先开发用户界面或者是类,然后再在此基础上编写测试. 但在TDD中,首先是进行测试用例的编写,然后再进行 ...

  10. MySQL监控工具-orzdba

    源代码地址:http://code.taobao.org/p/orzdba/src/trunk/     [root@hank-yoon servers]# chmod +x orzdba 在代码的1 ...