p:nth-child(2) 要满足两个条件,1:选择的是p元素的父元素的第二个子元素
  2:选择的第二个子元素必须是p元素,如果不满足,则将不显示
p:nth-of-type(2) 选择父元素下的第二个p元素

css3伪类、伪元素选择器---nth-child()和nth-of-type()选择器的区别的更多相关文章

  1. css伪类伪元素

    在CSS中,模式(pattern)匹配规则决定哪种样式规则应用于文档树(document tree)的哪个元素.这些模式叫着选择符(selector). 一条CSS规则(rule)是选择符{属性:值; ...

  2. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  3. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  4. css伪类 伪元素

    之前写了一篇 <详解 CSS 属性 - :before && :after> 的博文,当时自己没分清楚伪元素和伪类,所以在文章内把概念混淆了,庆幸 @riophae 兄指正 ...

  5. 伪类&amp;伪元素

    刚开始学习伪类和伪元素的时候,觉得好混乱呀,分不清有什么区别,用的时候也没注意对比.现在总结一下他们的区别吧. w3c中对它们的定义分别为: css伪类用于向某些选择器添加特殊的效果. css伪元素用 ...

  6. HTML5--(2)属性选择器+结构性伪类+伪类

    一.属性选择器 [att] 匹配所有具有att属性的 [att=val] 匹配所有att属性等于“val”的 [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一 ...

  7. css样式(二)(伪类 | 伪元素 | 导航 | 图像拼合 | 属性选择器 )

    一.rgb值: RGBA 颜色 RGBA 颜色值得到以下浏览器的支持:IE9+.Firefox +.Chrome.Safari 以及 Opera +. RGBA 颜色值是 RGB 颜色值的扩展,带有一 ...

  8. CSS选择器详解(伪类) 转 http://blog.csdn.net/Panda_m/article/details/50084699

    CSS选择器详解 之 伪类 伪类对大小写不敏感 结构伪类选择器 结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文 ...

  9. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  10. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

随机推荐

  1. 【转】SQLServerDBA十大必备工具---让生活轻松点

    曾经和一些DBA和数据库开发人员交流时,问他们都用过一些什么样的DB方面的工具,大部分人除了SSMS和Profile之外,基本就没有使用过其他工具了: 诚然,SSMS和Profile足够强大,工作的大 ...

  2. asp.net mvc 动态显示不同的部分视图

    首先是AJAX请求 //第一次打开 默认s单行文本 $.ajax({ type: "GET", url: "/Admin/Field/ChoiceType4Edit&qu ...

  3. View.VISIBLE、INVISIBLE、GONE的区别

    android中UI应用的开发中经常会使用view.setVisibility()来设置控件的可见性,其中该函数有3个可选值,他们有着不同的含义: View.VISIBLE--->可见View. ...

  4. #Leet Code# Best Time to Buy and Sell Stock

    描述:数组 A,对于 i < j, 找到最大的 A[j] - A[i] 代码: class Solution: # @param prices, a list of integer # @ret ...

  5. angular添加,查找与全部删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. HY.Mail:C#简单、易用的邮件工具库

    一.开发HY.Mail的初衷 Nuget或者github上有很多成熟且优秀的邮件库可以使用, 但是目前找到的使用都不够简洁或者不适合我的使用场景 我的场景是开发应用场景(例如系统通知.运维通知),而非 ...

  7. 2017-2018-1 1623 bug终结者 冲刺004

    bug终结者 冲刺004 by 20162322 朱娅霖 整体连接 简要说明 目前,我们已经完成了欢迎界面,主菜单界面,排行榜界面,选项界面,胜利界面,地板类.小人类.墙体类.箱子类和虚拟按键类. 主 ...

  8. html基础学习笔记1

    <!DOCTYPE html> 声明为 HTML5 文档  <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(meta)数据,如 &l ...

  9. Mac下安装最新版本的Graphviz

    由于版本兼容问题,Mac下Graphviz之前一直装的是低版本的2.36.高版本的安装方法如下: 1.log in & download Xcode an Xcode Command Line ...

  10. spring aop 学习1

    1.配置自动扫描的包 <context:component-scan base-package="com.ddf.spring.aop.impl"/> 2.使用spri ...