示例详细理解: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. Hash 迭代程序构造器要求字符串参数--错误解决

    报错提示: ERROR: Hash 迭代程序构造器要求字符串参数,位置: 行 56 列 23.ERROR: DATA STEP 组件对象失败.在“EXECUTION”阶段中止.NOTE: 由于出错,S ...

  2. 【Unix网络编程】chapter7套接字选项

    7.1 概述 有很多方法来获取和设置影响套接字的选项: getsockopt和setsockopt函数 fcntl函数 ioctl函数 7.2 getsockopt和setsockopt函数 7.3 ...

  3. Hadoop分布式文件系统HDFS

    HDFS的探究: HDFS HDFS是 Hadoop Distribute File System的缩写,是谷歌GFS分布式文件系统的开源实现,Apache Hadoop的一个子项目,HDFS基于流数 ...

  4. Vbox共享文件夹不显示了

    博主之前装的虚拟机没啥问题,按部就班,打开“我的电脑”可以看到主机上的共享文件夹,最近重装了一波,各种问题就来了,包括共享文件夹设置好后,看不见了. 介绍比较麻烦的方案,就是打开“我的电脑”,在地址栏 ...

  5. spring boot使用配置文件内容

    配置文件如下所示: server: port: 8081 context-path: /demo tag: 12 user: name1: mist-dev password: 123 然后可以通过以 ...

  6. 零基础学习python_类和对象（36-40课）

    今天我们开始学习面向对象的知识咯,之前我对面向对象也学的懵懵的,因为感觉知道好像又不是特别清楚,接下来我们一起来学习类和对象吧.零基础的课程我都是看小甲鱼的视频学的,没基础的可以去这个网址下载视频学习 ...

  7. uiautomator 代码记录 ： BT发送测试

    package rom; import java.lang.*; import java.util.Random; import java.io.File; import com.android.ui ...

  8. docekr－image的区别和container;docker run和start,create

    copy by: https://www.simapple.com/326.html 容器(container)的定义和镜像(image)几乎一模一样,也是一堆层的统一视角,唯一区别在于容器的最上面那 ...

  9. 查询oracle约束所关联的表

    ORA-02292: 违反完整约束条件 (ADMIN.FK_PROJECTP_RELATIONS_OFFICIAL) - 已找到子记录 遇到这样的错误,熟悉的话可能从约束名称看出是那张表的约束,因为名 ...

  10. Elasticsearch5.5.2安装和启动遇到哪些问题

    最近学习Elasticsearch,顺便记录下操作步骤,供日后参考 安装环境 CentOS release 6.6 1.因Elasticsearch是基于java写的,所以它的运行环境中需要java的 ...