<!--源代码-->
<!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. 关于在64位win7下运行Virtualbox安装系统时出错（提示VBoxDD.DLL错误）的解决方

    安装没有问题,安装了最新版VirtualBox-4.3.18-96516-Win,一点运行想安装系统时就出错. 这是提示的错误: 运行Virtualbox去安装系统时出错:Failed to open ...

  2. RTX Server SDK跨服务器如何调用

    1.   确认安装RTX Server SDK在开发的机器上必须确认已经安装了RTX Server SDK,并且与RTX Server的版本要一致.该计算机后面我们简称SDK计算机. 2.   步骤2 ...

  3. g2o的使用

    相关文献 1.论文 Grisetti, Giorgio, et al. “A tutorial on graph-based SLAM.” IEEE Intelligent Transportatio ...

  4. 1517 u Calculate e

    1. 最前面的格式要记得输入. 2. 计算的时候要从3开始重新计算, 否则会丢失精度. 3. 更快的方式就是打表. #include <iostream> using namespace ...

  5. Kubernetes (1.6) 中的存储类及其动态供给

    原文地址:http://blog.fleeto.us/translation/dynamic-provisioning-and-storage-classes-kubernetes-0?utm_sou ...

  6. Karma和Jasmine 自动化单元测试环境搭建

    最近初学AngularJS ,看到的一些教程中经常有人推荐使用Karma+Jasmine来进行单元测试.自己之前也对Jasmine有些了解,jasmine也是一个不错的测试框架. 1. karma介绍 ...

  7. winform 中TextBox只能输入数字

    textBox1.KeyPress+=TextNumber_KeyPress; private void TextNumber_KeyPress(object sender, KeyPressEven ...

  8. json 登陆协议分析

    登录方式有两种:1)用户名密码登陆,code 为 5401 (2) IMSI和TOKEN 登陆, code 为93 POST /tcpbus/mobile HTTP/1.1Host: clientac ...

  9. Re：从零开始的Spring Security Oauth2（一）

    前言 今天来聊聊一个接口对接的场景,A厂家有一套HTTP接口需要提供给B厂家使用,由于是外网环境,所以需要有一套安全机制保障,这个时候oauth2就可以作为一个方案. 关于oauth2,其实是一个规范 ...

  10. Word页面去除下划线(Office 2017)实现

    后面就不用说了吧设置边框无