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. seajs使用记录

    关于base的默认路径: [官方说明]: 模块系统的基础路径即 base 的默认值,与 sea.js 的访问路径相关: 如果 sea.js 的访问路径是: http://example.com/ass ...

  2. 【Qt】Qt国际化【转】

    简介 Qt国际化属于Qt高级中的一部分,本想着放到后面来说,上节刚好介绍了Qt Linguist,趁热打铁就一起了解下. 对于绝大多数的应用程序,在刚启动时,需要加载默认的语言(或最后一次设置的语言) ...

  3. php var_export与var_dump 输出的不同

    var_export必须返回合法的php代码,var_export返回的代码,可以直接当作php代码赋值个一个变量. 而这个变量就会取得和被var_export一样的类型的值.   问题描述: 在跟踪 ...

  4. mysql学习笔记之基础篇

    数据库学习之基础篇 ① 开放数据库互连(Open Database Connectivity,ODBC ② 结构化查询语言(Structured Query Language) ③ 进入mysql:M ...

  5. 在Debian中安装VMware Workstatption 12

    在Debian中安装VMware Workstatption 12-----------------------------------------------> 下载文件:    *vmwar ...

  6. nginx学习之一

    http://tengine.taobao.org/book/chapter_02.html

  7. hornetq 入门（1）

    Hornetq 版本2.4.0final  需要JDK7及以上 Hornetq官网 Hornetq2.1中文手册 step1.启动服务端 1.1准备配置文件(配置说明参考官网手册) hornetq-c ...

  8. TCP相关知识

    1. TCP与TCP/IP协议族 TCP是TCP/IP协议族中运输层的一个协议.TCP/IP,即传输控制协议/网间协议,是一个工业标准的协议集,包含了运输层.网络层和链路层的协议,其结构如下图所示:其 ...

  9. MonoBehaviour

    所有的Unity脚本都继承自MonoBehaviour这个类,它没有Main函数入口,采用了事件触发的模式,根据不同的事件响应不同的函数. void Start(): void Update():每一 ...

  10. html和css中的技巧

    1:标签不要忘记带点 2:div是否成对的出现. 3.body 前面不能加点 4.在写css时记住一定要带上class的命名这样就不会出现重复的 5.出现文字的时候下面有下划线或虚线的时候,用padd ...