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. 利用Socket进行大文件传输

    分类: WINDOWS 最近接触到利用socket进行大文件传输的技术,有些心得,与大家分享.首先看看这个过程是怎么进行的(如下图):      所以,我们需要三个socket在窗体加载的时候初始化: ...

  2. leetCode 103.Binary Tree Zigzag Level Order Traversal （二叉树Z字形水平序） 解题思路和方法

    Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from left to ...

  3. Android利用FTP实现与PC的上传和下载，实现二维码扫描下载

    之前给老板所带的本科生课程实验所写的代码,拿出来分享一下. 下载地址:  https://github.com/smartshuai/ConnectHelper.git

  4. HTTP网络协议(四)

    确保Web安全的HTTPS HTTP存在三个比较明显的缺点: 通信使用明文(不加密),内容可能会被窃听. 不验证通信方的身份,因此有可能遭遇伪装. 无法证明报文的完整性,所以可能已遭篡改.  尽管HT ...

  5. ZOJ 1242 Carbon Dating

    UVA昨天上不去,今天一大早起来还是上不去 0.0 于是去ZOJ 这题大意就是半衰期... 取对数用到了换底公式...我都忘了这玩意了T T 上代码... #include<iostream&g ...

  6. python3 pygame 坦克自动移动

    让坦克自动跑起来 这里需要一个坦克的图. 放到与脚本同一目录. 好,我们就让这个坦克自动跑. 下面上代码: # !/usr/bin/env python # -*- coding:utf-8 -*- ...

  7. P2P平台很赚钱么？

    最近几年,搞P2P网贷和财富投资相关的金融周边公司,多了很多,楼下门店和电梯里的贷款小广告,真是多啊. 大家都去搞一件事的时候,很可能是大家都觉得这件事有利可图.但事实是,赚钱的总是少数,看到别人搞的 ...

  8. struts2_7_Action类中方法的动态调用

    (一)直接调用方法(不推荐使用) 1)Action类: private String savePath; public String getSavePath() { return savePath; ...

  9. 【Codeforces Round #437 (Div. 2) B】Save the problem!

    [链接]h在这里写链接 [题意]     给你一个金额N,和硬币的类型总数M;     (完全背包),然后问你组成N的方案数.     使得,用这些硬币组成价值为N的金额的方案数为A;     现在A ...

  10. centos中的配置文件 分类： B3_LINUX 2015-04-03 22:21 184人阅读 评论(0) 收藏

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个 ...