示例详细理解:nth-child(n)与:nth-of-type(n)区别

childselector：nth-child(index)

1，子选择器(childselector，这里是p选择器)选中元素的父级元素ul，

得到所有子元素（包括自己和所有兄弟元素）(l1，p1，p2，l2，p3)，

从1开始计数排好序。从所有子元素中开始选

2，①第index个元素②还要必须符合childselector。

结论:这两个条件都要符合， 有一个不符合就选不中。

例如：p:nth-child(2) 1，第2个,2,必须是p元素

例如：p:nth-child(1) 1，第1个不是p元素 就选不中

childselector：nth-of-type(index)

1，子选择器(childselector，这里是p选择器)选中元素的父级元素ul，

得到符合子选择器(childselector）子元素（包括自己和符合子选择器(childselector）兄弟元素）

(p1，p2，p3)，从1开始计数排好序。从所有子元素中开始选

2，①第index个元素②还要必须符合childselector。结论:这两个条件都要符合， 有一个不符合就选不中。

p:nth-child(1) 第1个 必须是p元素 选中p1

p:nth-child(2) 第2个 必须是p元素 选中p2

简短理解

childselector：nth-child(index)

1,childselector元素的父元素的所有子元素,开始index从1开始计数

2,childselector, index:两个约束的地方

childselector：nth-of-type(index)

1,childselector元素的父元素的childselector子元素,开始index从1开始计数

2,childselector, index:两个约束的地方

nth的中文意思

形容词(一系列事物中)第 n 次的，第 n 位的

The story was raised with me for the nth time two days before the article appeared

在我第n次被问及这件事情的两天后，相关文章登了出来。 ----柯林斯高阶英汉双解学习

扩展

:first-child :last-child ：only-child :nth-child(n) :nth-last-child(n)

:first-type :last-type ：only-type :nth-of-type(n) :nth-last-type(n)

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

        /*

        这个选择不中

        原因参考http://www.cnblogs.com/leee/p/7275860.html

        li:nth-child(2) {

            color: green;

        } */

        p:nth-child(2) {

            color: green;

        }

        li:nth-of-type(2) {

            color: red;

        }

    </style>

</head>

<body>

    <ul>

        <li>li1</li>

        <p>p1</p>

        <li>li2</li>

        <p>p2</p>

        <li>li3</li>

    </ul>

</body>

</html>

运行

nth-child与nth-of-type区别的更多相关文章

  1. linux中查找命令find、locate、whereis、which、type区别

    linux中查找命令find.locate.whereis.which.type区别 1. find Java代码 find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件.与查询数据库(/ ...

  2. instance与type区别

    class Foo(object): pass class Bar(Foo): pass obj = Bar() # isinstance用于判断,对象是否是指定类的实例 (错误的) # isinst ...

  3. [Swift]LeetCode400. 第N个数字 | Nth Digit

    Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note:n is ...

  4. python 内建函数isinstance的用法以及与type的区别

    isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo)   如果参数object是classinfo的实例,或者object是class ...

  5. Sass函数：列表函数nth

    语法: nth($list,$n) nth() 函数用来指定列表中某个位置的值.不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值,2 是指列给中的第二个标签值,依此类 ...

  6. Doctype作用，标准模式与兼容模式的区别

    <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...

  7. orcle自定义类型type/create or replace type

    一.type / create or repalce type 区别联系 相同: 可用关键字create type 或者直接用type定义自定义类型, 区别: create type 变量 as ta ...

  8. Python type() 函数

    描述 type() 函数如果你只有第一个参数则返回对象的类型,三个参数返回新的类型对象.类似isinstance() isinstance() 与 type() 区别: type() 不会认为子类是一 ...

  9. 转载：oracle 自定义类型 type / create type

    标签:type create oracle object record 一:Oracle中的类型有很多种,主要可以分为以下几类: 1.字符串类型.如:char.nchar.varchar2.nvarc ...

  10. setContentView和inflate区别

    一般用LayoutInflater做一件事:inflate inflate这个方法总共有四种形式(见下面),目的都是把xml表述的layout转化为View对象.其中有一个比较常用,View infl ...

随机推荐

  1. css样式，高斯模糊

    .blur-container.blur-3 { --bg: url("background.jpg"); background-image: var(--bg); } .blur ...

  2. delphi2010 域名转换IP

    uses winsock; function GetHostIp_wwwdelphitopcom(HostName: string): string; type   tAddr = array[0.. ...

  3. Webbrowser指定IE内核版本(更改注册表)

    如果电脑上安装了IE8或者之后版本的IE浏览器,Webbrowser控件会使用IE7兼容模式来显示网页内容.解决方法是在注册表中为你的进程指定引用IE的版本号. 比如我的程序叫做a.exe 对于32位 ...

  4. Chapter1：Qt概念

    信号和槽1.信号与槽机制的连接方式(1):一个信号可以与另一个信号相连,代码如下: connect(Object1,SIGNAL(signal1),Object2,SIGNAL(signal1)); ...

  5. cocos源码分析--ClippingNode绘图原理

    在OpenGL 绘制过程中,与帧缓冲有关的是模版,深度测试,混合操作.模版测试使应用程序可以定义一个遮罩,在遮罩内的片段将被保留或者丢弃,在遮罩外的片段操作行为则相反.深度测试用来剔除那些被场景遮挡的 ...

  6. day16(软件开发目录规范)

    模块的使用01 模块的循环导入问题 解决方案一: 把循环导入的语句放到名字定义的后面 解决方案二: 将循环导入语句放到函数内(先定义确定名称空间)02 区分python文件的两种用途 #当文件被执行时 ...

  7. Linux Git install

    1.介绍 使用Coding管理项目,上面要求使用的git版本为1.8.0以上,而很多yum源上自动安装的git版本为1.7,所以需要掌握手动编译安装git方法. 2.安装git依赖包 yum inst ...

  8. python-对象方法、静态方法、类方法

    #-*- coding:utf-8 -*- #本次学习:对象方法.静态方法.类方法 class SeniorTestingEngineer: #属性--只能对象来调用self.salary work_ ...

  9. TessorFlow学习 之 神经网络的构建

    1.建立一个神经网络添加层 输入值.输入的大小.输出的大小和激励函数 学过神经网络的人看下面这个图就明白了,不懂的去看看我的另一篇博客 def add_layer(inputs , in_size , ...

  10. tomcat -web.xml里的内容

    <?xml version="1.0" encoding="UTF-8"?> <Server port="8005" sh ...