一开始写样式的时候喜欢全部元素都来个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. Linux下永久改动MAC地址和ifconfig命令总结

    1. 固定一个MAC地址,特别是在使用多个虚拟机的时候 linux环境下: 用root身份登录,在/etc/rc.d/rc.local里加上这三句 ifconfig eth0 down ifconfi ...

  2. 《深入理解Android 卷III》第五章 深入理解Android输入系统

    <深入理解Android 卷III>即将公布.作者是张大伟.此书填补了深入理解Android Framework卷中的一个主要空白.即Android Framework中和UI相关的部分. ...

  3. linux centos下载地址

    Centos下载地址 http://r.aminglinux.com

  4. R学习小计

    安装R扩展包:install.packages("FKF")http://www.douban.com/note/243004605/1.输入数据 l读入有分隔符数据:A<- ...

  5. c# iTextSharp导出PDF

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Th ...

  6. APP信息获取接口

    https://itunes.apple.com/lookup?id=APPID&callback=2 http://myapp.com/cgi-bin/mapp/mapp_info?type ...

  7. Windows 安装PostgreSQL

    下载二进制包:https://www.enterprisedb.com/download-postgresql-binaries 直接解压到C盘 Microsoft Windows [版本 6.3.9 ...

  8. python学习笔记第三章

    1.列表是由一系列特定顺序排列得元素组成,在python中用([])组成,列表得索引是从0开始,不是1 xu=['a','b',''c] print(xu) 访问列表的元素第一个元素 xu=['a', ...

  9. JS脚本代替人工输入

    最近接到了个任务,对某个网页上的1000个item填写相同的text,text的内容相同. 这显然是机械动作呀,干脆写个工具,用脚本代替人工操作. 浏览器按F12,找到console,输入写好的脚本, ...

  10. luogu P2664 树上游戏(点分治)

    点分治真是一个好东西.可惜我不会 这种要求所有路经的题很可能是点分治. 然后我就不会了.. 既然要用点分治,就想,点分治有哪些优点?它可以\(O(nlogn)\)遍历分治树的所有子树. 那么现在的问题 ...