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. 常用sql时间字符转化

    这边主要用到2个函数  convert()  cast() cast是对数据字符类型的转化,例如: cast(date as datetime)   这样就将date字段转化成为时间类型了 因为常用到 ...

  2. MyEclipse中新建html5中文乱码

    近期刚开始入门html5 和 javascript 用MyEclipse2104创建html5时,遇到浏览器显示中文乱码的问题 [MyEclipse中设置的html5,jsp编码都采用的UTF-8] ...

  3. 【转】AOP知识点

    ref:http://www.diybloghome.com/prology/975.html 一.概念理解 老规矩,还是先看官方解释:AOP(Aspect-Oriented Programming, ...

  4. CodeIgniter(CI 3.0)分页类实践记录

    最近在学习B/S,选择了PHP CI框架作为切入点. 在尝试制作个人CMS的时候遇到了需要分页的情况,网上好像搜不到3.0版本以上的例子,下面附上本地实验的代码,供参考. 数据库情况如下: 首先看Co ...

  5. Silverlight独立存储

    写 private void Button_Click_1(object sender, RoutedEventArgs e) { IsolatedStorageFile isf = Isolated ...

  6. HTML5 input新增的几种类型（数字、日期、颜色选取、范围）

    你可能已经听说过,HTML5里引入了几种新的input类型.在HTML5之前,大家熟知的input类型包括:text(输入框),hidden(隐藏域),submit(提交按钮)等.而HTML5到来之后 ...

  7. html css布局

    这几天有点急于求成了,原来每一门技术都像大海,只有深入其中才发现它比看到的更要深广的多. 虽然忙里偷闲的看了HTML5,NODE.JS,JAVASCRIPT核心等许多东西,但是真正掌握的不足十分之一, ...

  8. pipe/popen/fifo

    pipe(管道) 专用于父子进程通信, 函数原型 int pipe(int fd[2]) fd[0]表示输入, fd[1]表示输出 如果父子进程要双向通信, 可以通过类似信号的功能进行控制, 也可以简 ...

  9. Hive内表和外表的区别

    本文以例子的形式介绍一下Hive内表和外表的区别.例子共有4个:不带分区的内表.带分区的内表.不带分区的外表.带分区的外表. 1 不带分区的内表 #创建表 create table innerTabl ...

  10. 6、WPF中的特殊字符与空白

    特殊字符: 小于号 <  字符实体采用&lt表示 大于号 >  字符实体采用&gt表示 &符号      字符实体采用&amp表示 引号"&quo ...