示例详细理解: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. 多线程Task

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  2. Cookie快速入门实践

    第一个servlet[比如是CookieDemo01]中的代码如下: import javax.servlet.http.Cookie; //--------省略若干代码----------- pro ...

  3. vue打印html

    # vue打印功能 console.log(data.doPrint); // html字符串 let newContent =data.doPrint; let oldContent = docum ...

  4. RSA加密解密，String转PublicKey、PrivateKey；附Base64.JAR

    网络请求的数据需要加密,服务器给的他们那一套在Android一直报错,自己写了一个: package com.cc.common.util; import javax.crypto.Cipher; i ...

  5. es6基础(5)--数值扩展

    { //Number.isFinite数字是有尽的 console.log(Number.isFinite(15));//true console.log(Number.isFinite(NaN)); ...

  6. isNAN的使用方法及介绍

    NaN为 Not a Number isNaN()函数在接到一个值后,会尝试将这个值转换为数值. alert(isNaN(NaN)); //true alert(isNaN(25)); //false ...

  7. postgresql copy的使用方式

    方法一: 将数据库表复制到磁盘文件: copy "Test" to 'G:/Test.csv' delimiter ',' csv header encoding 'GBK'; 从 ...

  8. Js中，Map对象的使用

    1.定义 键/值对的集合. 2.语法 mapObj = new Map() 3.备注 集合中的键和值可以是任何类型.如果使用现有密钥向集合添加值,则新值会替换旧值. 4.属性 构造函数 :指定创建映射 ...

  9. django---单表操作之增删改

    首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  10. gentoo kvm qemu virt-manager - Unable to complete install: error creating macvtap interface macvtap0@: Operation not supported'

    碰到这个一般是内核没有开启相应的 macvtap 选项,开启相应选项后,就不会报错了. Device Drivers ---> Network Device Support ---> &l ...