示例详细理解: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. [UE4]C++实现动态加载的问题：LoadClass<T>()和LoadObject<T>() 及 静态加载问题：ConstructorHelpers::FClassFinder()和FObjectFinder()

    转自:http://aigo.iteye.com/blog/2281558 动态加载UObject和动态加载UClass分别用LoadObject<T>(),和LoadClass<T ...

  2. 用最通俗的话解释AJAX是什么东西

    直白地说,就是没用AJAX的网页,你点一个按钮就要刷新一下页面,尽管新页面上只有一行字和当前页面不一样,但你还是要无聊地等待页面刷新. 用了AJAX之后,你点击,然后页面上的一行字就变化了,页面本身不 ...

  3. ngModel缺省是by reference,

    1) 缺省是 by reference, not value,  ngModel, ngOptions等都一样 2) 如果要 track value 用 "track by",   ...

  4. Wsgi的web框架实例

    建立server服务端: from wsgiref.simple_server import make_server import time def f1(request): return [b'&l ...

  5. SQLServer树查询

    感觉这个CTE递归查询蛮好用的,先举个例子: use City; go create table Tree ( ID int identity(1,1) primary key not null, N ...

  6. element(vue.js)+django 整合

    近期开始接触Python,从web开发入门.尝试Django与vue整合,大概分3个阶段: 1.基于Django开发web后端 2.基于element开发好前端 3.前后端整合 参考:https:// ...

  7. visio交叉线不凸起

    使用visio作图时,经常会遇到交叉线在相交时会形成一个弯曲弓形,这有时十分影响视图效果.可以采用下面的方法消除弓形. 1.visio2003:只需要选中该交叉线,选择“格式”->“行为”,在打 ...

  8. 前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件

    前台 VUE 界面: <el-table-column prop="attachment" align="center" label="附件详情 ...

  9. jsfl 选择图层 选择帧 转化成mc

    //打开fla var _openDOC = fl.openDocument("file:///E|TE/爱.fla"); //获取图层4的总帧 var _Length=fl.ge ...

  10. crontab使用说明及例子程序

    http://blog.csdn.net/yygydjkthh/article/details/7845639 http://walkerqt.blog.51cto.com/1310630/16901 ...