<!--源代码-->
<!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. spring+springmvc+mybatis+redis实现缓存

    先搭建好redis环境 需要的jar如下: jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:330 ...

  2. CloudStack 虚拟机控制台报错

    Access denied. Invalid web session or API key in request     解决此问题的方法是: 修改cloudstac.core.callback.js ...

  3. spring4-5-事务管理

    1.简单介绍 事务管理是企业级应用程序开发中必不可少的技术,  用来确保数据的完整性和一致性. 事务就是一系列的动作, 它们被当做一个单独的工作单元. 这些动作要么全部完成, 要么全部不起作用 事务的 ...

  4. Linux cloc

    一.简介 cloc是一个基于perl的.十分好用的代码统计工具,它所支持的语言还算十分丰富.不过,还是有很多用的较少的语言是不支持的.   二.安装配置 1)官网安装教程 http://cloc.so ...

  5. dedecms开启报错调试

    位置:/include/common.inc.php //error_reporting(E_ALL); error_reporting(E_ALL || ~E_NOTICE); 替换成 error_ ...

  6. c linux ping 实现

    摘自:https://blog.csdn.net/weibo1230123/article/details/79891018 ping的实现和代码分析一.介绍     ping命令是用来查看网络上另一 ...

  7. js失效的原因及解决方式

    1.在head中先引用了js文件再引用jquery,应先引用jquery 2.js文件中所有代码应包含在$(function(){ });中

  8. 1028 Web Navigation

    题目链接: http://poj.org/problem?id=1028 题意: 模拟浏览器的前进/后退/访问/退出 的四个操作. 输出当前访问的URL或者Ignore(如果不能前进/后退). 分析: ...

  9. 将std::string当字节流使

    string是C++标准定义的字符串类,它不但支持文本,而且支持二进制字节流.给一个string变量赋值有多种方法: 1) 拷贝构造函数 2) 等号赋值函数 3) append成员函数 4) push ...

  10. 移动距离——第六届蓝桥杯C语言B组（省赛）第八题

    原创  问题描述: 移动距离 X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3...当排满一行时,从下一行相邻的楼往反方向排号.比如:当小区排号宽度为6时,开始情形如下: ...