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. GO语言学习（十八）Go 语言接口

    Go 语言接口 Go 语言提供了另外一种数据类型即接口,它把所有的具有共性的方法定义在一起,任何其他类型只要实现了这些方法就是实现了这个接口. 实例 /* 定义接口 */ type interface ...

  2. Linux字符界面安装图形界面XWindow

    https://jingyan.baidu.com/article/219f4bf790f4c7de442d3825.html

  3. Dynamic device virtualization

    A system and method for providing dynamic device virtualization is herein disclosed. According to on ...

  4. 安装filezilla client报错libgnutls版本旧

    http://blog.csdn.net/mofabang/article/details/9212217

  5. Android实现主动连接蓝牙耳机

    在Android程序中可以实现自动扫描蓝牙.配对蓝牙.建立数据通道. 蓝牙分不同类型,可以参考(http://gqdy365.iteye.com/admin/blogs/2229304) 可以入下面方 ...

  6. C语言深度剖析-----数组与指针分析

    数组的本质: 指针的运算: 小标VS指针: a和&a的区别: 例: 数组参数: 所以下例返回4 指针和数组的对比小结:

  7. windows apache 跳转 tomcat 代理

    需求是这样的 服务器有tomcat和apache两个服务器 t端口号是8080,a端口是80 比如javaweb的域名是 www.XXX.com:8080 phpweb的域名是  a.XXX.com ...

  8. SQL Server 2008 Tempdb 数据库迁移

    1.首先检查数据文件位置及名称 SELECT name,physical_name FROM sys.database_files 2.迁移 USE master; GO ALTER DATABASE ...

  9. 【习题5-1 UVA - 1593】Alignment of Code

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟题,每一列都选最长的那个字符串,然后后面加一个空格就好. 这个作为场宽. 模拟输出就好. [代码] #include <b ...

  10. 25、驱动调试之打印到proc虚拟文件

    1.dmesg指令是通过读/proc/kmsg来获取打印信息,也可以通过cat /proc/kmsg打印: 说明:kmsg是环形缓存区,只能读一次 2.内核中fs/proc目录下有相关文件,比如pro ...