一开始写样式的时候喜欢全部元素都来个class,后面发现这样一个页面下来很多个class,起名字起到发慌,然后老师说该多用 逻辑关系来写样式,就是这种第几个孩子啊这种,不知道你们有没有这种烦恼,要用的时候觉得哇,type和child这两个傻傻难分。。。

好了,入正题,其实可以从表面窥视到这两人的”内心“,且称他们为type先生和child先生,他们都以自己为重,顾名思义,type先生会关注type类型,比如说div:nth-of-type(n)代表他是第n个类型为div的子元素,不管在他之前有多少 个同级元素,只要不是div类型就都不算数,就是说这个div元素不一定在父元素中是第n个子元素,但他一定是第n个div元素;而child先生只在乎你这个div是不是父元素的第n个孩子,div:nth-child(n)就代表他是父元素的div元素,并且!并且他是爸爸元素的第n个孩子元素,他之前的所有同级元素都算数,如果第n个子元素不是div元素,那对不起,爸爸要的不是你,爸爸宁可没有儿子也不会乱认儿子,所以这时候 div:nth-child(n)后面花括号内的操作不会起作用。

div:nth-of-type(2){background-color:blueviolet}是把父元素里的第二个div子元素设置背景为蓝紫色,二儿子是爸爸里面的第三个子元素(鬼儿子才是第二个子元素),但是没关系,他是爸爸里面的第二个div类型元素所以他背景色变成了蓝紫色,二叔是body的第二个div子元素所以它背景自然就是蓝紫色了。

但是只改一句,div:nth-child(2){backgroun-color:yellow},这里只要第二个孩子元素,而且这个孩子元素要是div才会背景设置为黄色,在爸爸的四个儿子里面,偏偏第二个孩子是p元素,不是div,所以这个爸爸里面没有儿子被设为背景为黄色,只有二叔背景被设为了背景为黄色,因为二叔是body这个父元素里的第二个孩子且是div元素。

总结一句,child先生要求比较高,还是多用type先生吧,因为我们平时的思维都是:我要设置第几个xxx类型的样式为啥啥啥,即xxx:nth-of-type(n){。。。。。。}

原文:https://blog.csdn.net/weixin_41957484/article/details/80411082

关于nth-of-type和nth-child的关系的更多相关文章

  1. c# 之 System.Type.GetType()与Object.GetType()与typeof比较

    Object.GetType()与typeof的区别 //运算符,获得某一类型的 System.Type 对象. Type t = typeof(int); //方法,获取当前实例的类型. ; Con ...

  2. python摸爬滚打之day18----instance, type, issubclass和反射

    1.issubclass(a,b)  ----> 判断a是否是b的子类.  isinstance(a,b)  ----> 判断a这个对象是否是b类型的(可以向上判断, 即考虑继承关系往父类 ...

  3. python中type、class、object之间的关系

    先看一段代码 # -*- coding:UTF-8 -*- __autor__ = 'zhouli' __date__ = '2018/11/13 18:40' a = 1 b = 'abc' pri ...

  4. 关于类型Type

    每一个JC语法节点都含有type属性,因为做为所有JC语法节点的父节点JCTree含有type属性.其继承关系如下图. 下面看一下Type类的定义及重要的属性. public class Type i ...

  5. Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion(一)

    题外话:本篇是对之前那篇的重排版.并拆分成两篇,免得没了看的兴趣. 前言 在Spring Framework官方文档中,这三者是放到一起讲的,但没有解释为什么放到一起.大概是默认了读者都是有相关经验的 ...

  6. Spring Framework 官方文档学习(四)之Validation、Data Binding、Type Conversion

    本篇太乱,请移步: Spring Framework 官方文档学习(四)之Validation.Data Binding.Type Conversion(一) 写了删删了写,反复几次,对自己的描述很不 ...

  7. python 中type和object的关系

    转自:https://segmentfault.com/a/1190000008938763 学习python的同学都知道这么几句话 object类是所有新式类的父类. type是所有类的类. 那么t ...

  8. mysql 中 DATE_ADD(date,INTERVAL expr type)

    在Hiredmyway中: SELECT if(LENGTH(company_name) > 30,                   concat(SUBSTRING(company_nam ...

  9. python type 与 metaclass理解

    简介 众所周知,type在一般情况下,我们都会去获取一个对象的类型,然后进行类型的比较:除此之外,type还有一个不为人知的作用:动态的创建类.在了解这个之前,首先了解以下type和isinstanc ...

  10. javascript脚本化文档

    1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...

随机推荐

  1. HDU 4415 Assassin's Creed(贪心)

    pid=4415">HDU 4415 题意: 壮哉我Assassin! E叔有一柄耐久度为m的袖剑,以及n个目标士兵要去解决. 每解决掉一个士兵,消耗袖剑Ai的耐久度.且获得该士兵的武 ...

  2. 浅谈关于collection接口及相关容器类(一)

    Collection在英文单词的意思是:採集,收集. 而在JAVA API 文档中它是一个收集数据对象的容器. Collection作为容器类的根接口.例如以下图(部分子接口未写出): waterma ...

  3. java结合jQuery.ajax实现左右菜单联动刷新列表内容

    http://域名/一级菜单ID-二级菜单ID/ 用这种URL请求页面,出现如图所看到的内容: 该页面包括四部分,顶部文件夹+左側菜单+右側菜单+右下側数据列表. 左側菜单包括一级菜单和二级菜单,点击 ...

  4. Educational Codeforces Round 6 B. Grandfather Dovlet’s calculator 暴力

    B. Grandfather Dovlet’s calculator   Once Max found an electronic calculator from his grandfather Do ...

  5. php利用href进行页面传值的正确姿势

    首先在a.php中 <?php $a = "world"; echo "<a href='b.php?m=$a'>删除</a>"; ...

  6. bzoj3262: 陌上花开(cdq分治+树状数组)

    3262: 陌上花开 题目:传送门 题解: %%%cdq分治 很强大的一个暴力...感觉比分块高级多了 这道题目就是一个十分经典的三维偏序的例题: 一维直接暴力排序x 二维用csq维护y 三维用树状数 ...

  7. spring中bean标签factory-method和factory-bean)详解工厂方法(factory-method和factory-bean)

    转自:http://blog.sina.com.cn/s/blog_6d3c1ec601019f3j.html A.factory-method The name of a factory metho ...

  8. 记录一下c++的一点指针所得

    c++有两种传值可以改变外部参数,一种是传递指针,另一种是传递引用,对于前者,可以用Ugly(but explicitly),对于后者,Clean(but hidden),在传递的时候有一种值得注意的 ...

  9. java布局管理

    FlowLayout :组件在一行中按加入的先后顺序从左至右水平排列,排满后折行,每行中的组件都居中排列.BorderLayout:把容器空间划分为北.南.西.东.中五个区,每加入一个组件都应说明把这 ...

  10. (转载) 清理缓存 IPackageStatsObserver

    清理缓存 IPackageStatsObserver 2016-04-10 13:40 2288人阅读 评论(0) 收藏 举报  分类: android(59)  版权声明:本文为博主原创文章,未经博 ...