<!--源代码-->
<!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. 44. Wildcard Matching 有简写的字符串匹配

    ［抄题］: Given an input string (s) and a pattern (p), implement wildcard pattern matching with support ...

  2. hadoop组件启动和关闭命令

    一.启动相关组件之前 一般安装完hadoop之后需要格式化一遍hdfs: hdfs namenode -format 然后再进行其他组件的启动,hadoop相关组件都是用位于...hadoop/sbi ...

  3. 使用lucene query的CharFilter 去掉字符中的script脚本和html标签

    1.准备数据,这里我从数据库读取一个带有html标签和script脚本的数据

  4. 一文读懂HDMI和VGA接口针脚定义

    一文读懂HDMI和VGA接口针脚定义 摘自:http://www.elecfans.com/yuanqijian/jiekou/20180423666604.html   HDMI概述 HDMI是高清 ...

  5. ofo开锁共享平台

    http://www.cnblogs.com/mengyu/p/7700980.html

  6. Java操作XML的工具:JAXB

    JavaArchitecture for XML Binding (JAXB) 是一个业界的标准,是一项可以根据XML Schema产生Java类的技术.该过程中,JAXB也提供了将XML实例文档反向 ...

  7. DeepLearning 学习资料

    1 sotfmax 函数: stanford UFLDL: http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD ...

  8. Swig在Mac OS X上的安装

    网上有很多类似文章介绍Swig怎么在Mac OS X上安装和配置,一般来说就是: 下载pcre,configure & make & make install 下载swig,confi ...

  9. 大佬福利之在你眼中 Web 3.0 是什么？(转)

    web 3.0 Web 3.0一词包含多层含义,用来概括互联网发展过程中某一阶段可能出现的各种不同的方向和特征.Web 3.0 充满了争议和分歧,它到底应该什么样?具体的标志点又是什么? Web 2. ...

  10. CodeForces 540B School Marks （贪心）

    题意:先给定5个数,n,  k, p, x, y.分别表示 一共有 n 个成绩,并且已经给定了 k 个,每门成绩 大于0 小于等于p,成绩总和小于等于x, 但中位数大于等于y.让你找出另外的n-k个成 ...