<!--源代码-->
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        div{

            width: 100px;

            height: 100px;

            background: #ff11ff;

        }

        p{

            width: 100px;

            height: 100px;

            background: blue;

        }

        /*div:nth-child(2n+1){*/

            /*background: red;*/

        /*}*/

        div:nth-of-type(2n+1){

            background: red;

        }

    </style>

</head>

<body>

<div></div>

<div></div>

<p></p>

<div></div>

<div></div>

</body>

</html>

使用nth-child的效果图：　　　　　　　　　　　　　　　　　　　　　　　　使用nth-of-type：效果

                                                                                               

从上面可以看到：nth-child是从父元素的第一个子元素算起走，会算其他标签元素，而nth-of-type只会计算父元素下本标签元素

CSS的nth-of-type和nth-child的区别的更多相关文章

  1. AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别

    AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...

  2. 网站开发进阶(四十四)input type="submit" 和"button"的区别

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  3. amazeui中css组件、js组件、web组件的区别

    amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...

  4. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  5. <input type="image"> 和 <img> 用法区别

    原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image ...

  6. css定位:相对定位、绝对定位、固定定位的区别与特性

    css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...

  7. CSS 去掉IE10中type=password中的眼睛图标

    在IE10中,input[type=password],如果我们输入内容后,内容会变成圆点,这与以前一样,但后面多了一个眼睛图标,我们鼠标移过去按下会出现输入内容.有时我们想去掉这功能.IE10允许我 ...

  8. css 选择器/table属性/type 属性

    css   style样式---要写单位px style=" width: 200px; height :300px;" ;是结束符              

  9. css 能改变input type radio和checkbox 圆圈或方框的大小

    把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <label for="remember& ...

  10. css引入方式优先级以及不同选择器的优先级区别

    我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...

随机推荐

  1. windows下怎么安装protobuf for python

    首先从google上下载protobuf-3.0.0.zip和protoc-3.0.0-win32.zip,然后把protoc-3.0.0-win32.zip里的protoc.exe放到protobu ...

  2. AspectJ AOP介绍

    idea下aspectj程序运行示例 有些同学可能想自己编写aspect程序进行测试练习,博主在这简单介绍运行环境的搭建,首先博主使用的idea的IDE,因此只对idea进行介绍.首先通过maven仓 ...

  3. p2319 [HNOI2006]超级英雄

    传送门 分析 从1道m进行匹配,找到第一个不能继续匹配的点即可 代码 #include<iostream> #include<cstdio> #include<cstri ...

  4. code3728 联合权值

    一开始暴搜,超时3个点... 后来看了题解: 首先,两个点的距离为2当且仅当它们都与一个点直接相连 反过来说,一个点所有的出边的终点都是互相距离2的(最大值可以依靠这个方法,前向星处理的时候将每个点的 ...

  5. 在Linux下配置.net网站

    一.Linux安装 1.1 Linux环境 本篇文章选择VMWare虚拟机安装Linux,使用的Linux是CentOS-7.可以在百度上自行下载一个VMWare和CentOS-7镜像,建议使用最新版 ...

  6. 熟悉相关电路，控制I/O口，且配置相关参数，LED,光敏，74LS164数码管

    1.掌握zigbee无线模块的基本工作电路. 2.上面芯片跟仿真器连接需要5根线,电源.地.复位.P2_1.P2_2. 输出的配置:a.首先要让相应IO口处于普通IO口模式,非片上外设的模式:b.让普 ...

  7. 随机抽样问题（蓄水池问题Reservoir Sampling）

    转自:孤影醉残阳 http://hi.baidu.com/siyupy/item/e4bb218fedf4a0864414cfad 随机抽样问题(蓄水池问题Reservoir Sampling) 随即 ...

  8. 【转载】Maven+druid+MyBatis+Spring+Oracle+Dubbo开发环境搭建

    原地址:http://blog.csdn.net/wp1603710463/article/details/48247817#t16 Maven+druid+MyBatis+spring+Oracle ...

  9. C#延迟执行

    借鉴于该篇博客:http://kb.cnblogs.com/page/42581/ 先看两个方法 public class YieldClasses { public static IEnumerab ...

  10. Logstash 算术运算操作

    需求:input为json,output为ES,需使用filter提取json中的某个字段,并执行加法.加法.乘法等算法操作 思路:mutate过滤器+ruby过滤器实现 避坑:根据ES及Logsta ...