<!--源代码-->
<!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. 85. Maximal Rectangle 由1拼出的最大矩形

    ［抄题］: Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle containing only 1 ...

  2. tomcat使用log4j管理日志

    1.JDK+tomcat环境  参考:http://www.cnblogs.com/zzzhfo/p/6444029.html 2.下载相关软件 log4j下载地址 http://www.apache ...

  3. C#中不同格式数据校验的正则表达式

    网上经常看到用正则表达式校验数据的文章,有的虽然总结得很全,但是大多数都没有经过严格验证,错误较多. 本文包含三十余条不同格式数据校验的C#正则表达式,一般均附有说明,且在Visual Studio里 ...

  4. go语言的特殊变量 iota

    iota,是go语言的特殊常量,可以认为是一个可以被编译器修改的常量. 在每一个const关键字出现时,被重置为0,然后在下一个const出现之前,每出现一次iota,其所代表的数字会自动增加1. 来 ...

  5. BS4爬虫实例应用-CISP

    爬取目前在官网可查询的CISP证书编号以及有效期并入库 也算是暴力破解,burp使用grep功能呢也可以实现. 下面是python的代码 #coding=utf-8 import requests i ...

  6. HTML的DOM树结构

    在面试连续跪了两轮后,我觉得两个月的前端白学了.主要的原因是学而不思,知识是零散的,并没有组织起来.于是,我决定从今天起,复习并总结一下前端的知识点. 一般的网页浏览者看到的是网页的整体外观,前端开发 ...

  7. C++11学习笔记之三lamda表达式，std::function, std::bind

    //lamda //first lamda [] {}; // second lamda []() //or no need () when paramater is null { std::cout ...

  8. Generated by NetworkManager、ubuntu DNS设置丢失（network-manager造成的情况）

    方法一:去掉重启 方法二:卸载network-manager 实测网络不稳,经常掉线(kalinux2.0环境)

  9. 使用火蜘蛛采集器Firespider采集天猫商品数据并上传到微店

    有很多朋友都需要把天猫的商品迁移到微店上去.可在天猫上的商品数据非常复杂,淘宝开放接口禁止向外提供数据,一般的采集器对ajax数据采集的支持又不太好. 还有现在有了火蜘蛛采集器,经过一定的配置,终于把 ...

  10. boost::bind和boost::function使用示例

    C++11已支持bind和function,之前的不支持,但可以借助boost达到同样目的.看如下两段代码: 1) 创建HDFS目录 void hdfs::init() { if (0 == hdfs ...