css3的nth-child和:nth-of-type之间的差异

对于:nth-child选择器,意味着选择一个元素如果:

  1. 这是个段落元素
  2. 这是父标签的第二个孩子元素

对于:nth-of-type选择器,意味着选择一个元素如果:

  1. 选择父标签的第二个段落子元素

<section>
<span>123</span>

<p>我是第1个p标签</p>
<p>我是第2个p标签</p><!-- p:nth-child(2) { color: red; } -->
<p>我是第3个p标签</p><!-- p:nth-of-type(2) { color: red; }
-->
</section>

看效果。。。

时间: 2024-07-31 03:32:41

css3的nth-child和:nth-of-type之间的差异的相关文章

IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类 _1.CSS部分:一个有冒号,一个是空格分隔.前者IE8+及其他现代浏览器:后者为IE6-7准备的 #test:before, #test before{ content: attr(data-content); width: 0; height: 0; } _2.HTML部分 <div id="test"  data-content=""></div> 设置content _3.JS部分 设置IE6/7 var $b

CSS3选择器:nth-child和:nth-of-type之间的差异(转)

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 参考文章:The Difference Between :nth-child and :nth-of-type 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大

CSS3选择器:nth-child和:nth-of-type之间的差异——张鑫旭

一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section> 然后两个选择器相对应的CSS

CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿

一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标签</p> <p>我是第2个p标签</p> <!-- 希望这个变红 --> </section> 然后两个选择器相对应的CSS

[css3]CSS3选择器:nth-child和:nth-of-type之间的差异

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1709 一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器. 先看一个简单的实例,首先是HTML部分: <section> <p>我是第1个p标

CSS3选择器:nth-child和:nth-of-type之间的差异

对于p:nth-child选择器,选择一个元素如果: 这是个段落元素 这是父标签的第二个子元素 对于p:nth-of-type选择器,选择一个元素如果: 选择父标签的第二个段落子元素 :nth-of-type选择器,限制条件少

Java 中包装类wrapped type之间以及和primitive type的比较

注意, 包装类的实例之间比较, 是不能直接用 == 的 public static void main(String[] args) { // TODO Auto-generated method stub Integer a = new Integer(1); Integer b = new Integer(1); int c=1; Integer e = 1; System.out.println("a==b:"+(a==b)); System.out.println("

CSS3阴影 box-shadow的使用和技巧总结

text-shadow是给文本添加阴影效果,box-shadow是给元素块添加周边阴影效果.随着HTML5和CSS3的普及,这一特殊效果使用越来越普遍. 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor} 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型:此参数可选.如不设值,默认投影方

CSS3高级

一.学习目标 二.box-sizing属性 语法:box-sizing: content-box|border-box|inherit box-sizing属性的用法: box-sizing属性可以为三个值之一: content-box(default),border-box,padding-box. 1.content-box,border和padding不计算入width之内 2.padding-box,padding计算入width内 3.border-box,border和padding