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. Redis的高级应用-事务处理、持久化、发布与订阅消息、虚拟内存使用

    三.事务处理 Redis的事务处理比较简单.只能保证client发起的事务中的命令可以连续的执行,而且不会插入其他的client命令,当一个client在连接 中发出multi命令时,这个连接就进入一 ...

  2. 深度解析VC中的消息

    消息是指什么? 消息系统对于一个win32程序来说十分重要,它是一个程序运行的动力源泉.一个消息,是系统定义的一个32位的值,他唯一的定义了一个事件,向Windows发出一个通知,告诉应用程序某个事情 ...

  3. sublime找到成对标签（Ctrl+Shift+"）

    sublime找到成对标签(Ctrl+Shift+") windows版本默认快捷键是Ctrl+Shift+" sublime text怎么突出显示成对标签 使用BracketHi ...

  4. Spring 使用Cache(转)

    从3.1开始Spring引入了对Cache的支持.其使用方法和原理都类似于Spring对事物管理的支持.Spring Cache是作用在方法上的,其核心思想是:当我们在调用一个缓存方法时会把该方法参数 ...

  5. 部分和（partial sum）在算法求解中的作用

    C++ 的 STL 库的 <numeric> 头文件的 partial_sum 函数已实现了对某一序列的 partial sum. partial_sum(first, last, des ...

  6. 修改SVN中文件的可执行属性

    博文来自下面路径,转载请注明原出处: http://bigwhite.blogbus.com/logs/74568031.html 修改SVN中文件的可执行属性 - [开源世界] Tag:开源世界 S ...

  7. Cocos2d-x使用Javascript开发js绑定C++&lt;代码演示样例&gt;

    class IOSiAPDelegate{ public: virtual ~IOSiAPDelegate() {} }; class IOSAlipay{ public: IOSAlipay(); ...

  8. iis windows phpstudy安装redis扩展

    说明,我的服务器是2008 64位 php5.4.33 首先下载符合条件的redis扩展,是否符合条件可以参考https://pecl.php.net/package/redis,进入之后,点击&qu ...

  9. HTML标签的权重

    原文 简书原文:https://www.jianshu.com/p/c86d540aec40 大纲 1.HTML权重标签 2.常见的权重标签 3.常见的权重标签的使用 1.HTML权重标签 SEOer ...

  10. 【26.34%】【codeforces 722A】Broken Clock

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...