示例详细理解: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. 如何查看yum 安装的软件路径

    1.首先安装一个redis [root@iZbp1eem925ojwyx17ao9kZ ~]# yum install redis 2.查找redis的安装包 [root@iZbp1eem925ojw ...

  2. Linux CentOS7.5上二进制安装MySQL5.7.23

    1.下载二进制文件 cd /usr/local/src/ wget https://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.23-linux-glib ...

  3. Jupyter配置步骤

    Jupyter是基于浏览器的可交互式开发工具,在数据科学界非常受欢迎,它功能齐全,使用方便,是一款数据分析和建模挖掘的利器. 本文简介Jupyter的配置和使用过程 一.修改添加国内镜像 通常我会先安 ...

  4. courator - create

    0. retry policy RetryPolicy retryPolicy = new ExponentialBackoffRetry(3000,3); 1. client 1) recipes ...

  5. 锚点定位，jquery定位到页面指定位置

    jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

  6. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  7. django中路由系统和视图的对应关系（值的传递）-->主要内容（位置参数、关键字参数、额外参数、include分组[urls的分发]、命名分组、反向解析、APPEND_SLASH）

    路由系统也就是 urls.py文件,视图就是 views.py文件 路由系统里面要注意的事项 urlpatterns中的元素按照书写顺序从上往下逐一匹配正则表达式,一旦匹配成功则不再继续. 若要从UR ...

  8. python－运算符重载

    1. __item__ class X: def __init__(self, data=None): self.data = data or [] # 同样可用于 dict def __setite ...

  9. 5.1_非监督学习之sckit-learn

    非监督学习之k-means K-means通常被称为劳埃德算法,这在数据聚类中是最经典的,也是相对容易理解的模型.算法执行的过程分为4个阶段. 1.首先,随机设K个特征空间内的点作为初始的聚类中心. ...

  10. Ruby学习笔记1 -- 基本语法和数据类型, Class

    Ruby 有4种数据类型:String, Boolen, Array, Hashes Ruby 有3种操作方法:Method, attribute, ?? Ruby 有xxx: Classes, Ob ...