nth-of-type这个CSS3伪类还从来没有用过，今天好好研究一番，发现还是有用的。现在下面的Demo

<!DOCTYPE html>

<html>

    <head>

    <meta charset="utf-8">

    <title>test</title>

        <style>

            .test1 p:nth-of-type(1) {

                color: blue;

            }

            .test2 p:nth-child(1), .test3 p:nth-child(1) {

                color: blue;

            }

        </style>

    </head>

    <body>

        <div class="test1">

            <a>This is some .</a>

            <p>This is some text.</p>

            <p>This is some text.</p>

        </div>

        <br>

        <div class="test2">

            <a>This is some .</a>

            <p>This is some text.</p>

            <p>This is some text.</p>

        </div>

        <br>

        <div class="test3">

            <p>This is some text.</p>

            <p>This is some text.</p>

        </div>

    </body>

</html>

显示结果如下

可见，p:nth-of-type(1)是取父元素下的p这种类型的第一个，p前面可能会有其它类型的元素；而p:nth-child(1)是父元素的第一个元素，且该元素必须是p。可以参考这篇文章，CSS3 选择器——伪类选择器 但这篇文章有些方向错误，认为nth-of-type在工作中没用。其实在某些情况下还是十分有用的。

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

  1. [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 ...

  2. Sass函数：列表函数nth

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

  3. Selenium Xpath Tutorials - Identifying xpath for element with examples to use in selenium

    Xpath in selenium is close to must required. XPath is element locator and you need to provide xpath ...

  4. jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...

  5. jq 弹半透明遮罩层

    jquery制作点击按钮弹出遮罩半透明登陆窗口 // )[^>]*$|^#([\w-]+)$/,M=/^.[^:#\[\.,]*$/,ka=/\S/,$= /^(\s|\u00A0)+|(\s| ...

  6. web前端面试题总结

    HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前.告知浏览器的解析 ...

  7. 前端开发面试知识点大纲--摘自jackyWHJ

    前端开发面试知识点大纲:HTML&CSS:    对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...

  8. HTML、CSS部分

    要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...

  9. Scalaz（24）－ 泛函数据结构： Tree-数据游览及维护

    上节我们讨论了Zipper-串形不可变集合(immutable sequential collection)游标,在串形集合中左右游走及元素维护操作.这篇我们谈谈Tree.在电子商务应用中对于xml, ...

  10. jquery.SuperSlide.2.1.2--轮播（兼容到IE7 适用于整屏）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. Linux中top命令参数详解

    此文摘自(https://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316399.html) 简介 top命令是Linux下常用的性能分析工具,能够实 ...

  2. 【Educational Codeforces Round 33 A】Chess For Three

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题.知道哪个人是旁观者就好 [代码] /* 1.Shoud it use long long ? 2.Have you ever ...

  3. 机器学习算法中怎样选取超參数：学习速率、正则项系数、minibatch size

    本文是<Neural networks and deep learning>概览 中第三章的一部分,讲机器学习算法中,怎样选取初始的超參数的值.(本文会不断补充) 学习速率(learnin ...

  4. js进阶 14-6 $.ajax()方法如何使用

    js进阶 14-6 $.ajax()方法如何使用 一.总结 一句话总结:$.ajax([settings])settings可选.用于配置Ajax请求的键值对集合. 1.$.ajax()的特点是什么( ...

  5. oracle主机名修改

    转自:http://www.cnblogs.com/tippoint/archive/2013/04/07/3003810.html 有的情况下,我们需要修改已经安装oracle数据库的主机名.以下是 ...

  6. 【Educational Codeforces Round 31 C】Bertown Subway

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 最后肯定会形成若干个环的. 把最大的两个环合在一起就好. 每个环贡献: 假设x=环的大小 ->x*x 注意int的溢出 [代码 ...

  7. vue项目中一些文件的作用

    原文 简书原文:https://www.jianshu.com/p/38749e5bec3c 大纲 1.vue项目结构 2.主要的配置文件 2.1.package.json 2.2.dev-serve ...

  8. NoSql中的B-tree、B+tree和LSM-tree 分类： B7_HBASE 2015-03-15 18:27 85人阅读 评论(0) 收藏

    总结: 1.B+树将数据完全排序,读数据时很快,但当要修改数据时,就需要将新入数据下面的数据重新排位,特别是当写入的数据排在较高的位置时,需要大量的移位操作才能完成写入. 2.SLM牺牲部分的读性能, ...

  9. linux跟踪线程的方法：LWP和strace命令

    摘要:在使用多线程程序时,有时会遇到程序功能异常的情况,而这种异常情况并不是每次都发生,很难模拟出来.这时就需要运用在程序运行时跟踪线程的手段,而linux系统的LWP和strace命令正是这种技术手 ...

  10. Bluetooth---初步了解Android 蓝牙4.0

    http://developer.android.com/reference/android/bluetooth/package-summary.html android.bluttooth 提供管理 ...