E:nth-child(n)

语法:

E:nth-child(n) { sRules }

说明:

匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。(也就是说,会检查从body开始的每个元素的第N个子元素是不是E元素,如果是的话,就附加上相应的CSS样式)

  • 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是body,即E可以是body的子元素
  • 该选择符允许使用一个乘法因子(n)来作为换算方式,比如我们想选中所有的偶数子元素E,那么选择符可以写成:E:nth-child(2n)

CSS :before 选择器

实例

在每个 <p> 元素的内容之前插入新内容:

p:before
{
content:"台词:";
} 台词:我是唐老鸭。 注意:加入的content是用鼠标无法选择的
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2

E:nth-of-type(n)

语法:

E:nth-of-type(n) { sRules }

说明:

匹配同类型中的第n个同级兄弟元素E。

  • 要使该属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
  • 该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E
  • 有一点需要注意的是:

    HTML示例代码:

    <div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> </div>

    如上HTML,假设要命中第一个span:

    span:nth-of-type(1){color:#f00;}

    如果使用E:nth-child(n):

    span:nth-child(3){color:#f00;}

    :first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
    :last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
    :only-of-type p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 3
    :only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
    :enabled input:enabled 选择每个启用的 <input> 元素。 3
    :disabled input:disabled 选择每个禁用的 <input> 元素 3
    :checked input:checked 选择每个被选中的 <input> 元素。 3
    :not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
    ::selection ::selection 选择被用户选取的元素部分。 3

CSS3 :nth-child() 选择器---挖坑的更多相关文章

  1. CSS3 nth 伪类选择器

    考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...

  2. 极客技术专题【008期】:CSS3核心技术:选择器

    日期:2013-8-19  来源:GBin1.com 技术专题介绍 技术专题:CSS3核心技术:选择器 专题演讲稿:CSS3选择器 分享人:知名前端技术博客 - w3cplus.com 博主 - 大漠 ...

  3. jQ not()选择器 与 css3 :not( selector )选择器

    1.jQ  not() 2.css3 not  w3c在线演示地址  http://www.w3school.com.cn/tiy/t.asp?f=css_sel_not 总结: 注意两者还是有区别的 ...

  4. css3的nth-child选择器的具体探讨

    css3的nth-child选择器的具体探讨 前言 在十年前開始的div+css布局兴起之时,我就開始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,仅仅有ID选择器,CLA ...

  5. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  6. CSS3的属性选择器

    CSS3中新增了许多选择器,今天零度给大家说说CSS3的属性选择器. 与CSS2相比,CSS3新增了3种属性选择器:[attr^=value].[attr$=value].[attr*=value]: ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  8. CSS3的nth-child() 选择器

    CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...

  9. CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器

    CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  10. JQ表单选择器和CSS3表单选择器

    JQ表单选择器和CSS3表单选择器 JQ表单选择器 为了使用户能够更加灵活地操作表单,jQuery中加入了表单选择器,利用这个选择器能极其方便的获取到表单的某个或者某类型的元素.表单选择器的介绍如图: ...

随机推荐

  1. "《算法导论》之‘队列’":队列的三种实现(静态数组、动态数组及指针)

    本文有关栈的介绍部分参考自网站数据结构. 1. 队列  1.1 队列的定义 队列(Queue)是只允许在一端进行插入,而在另一端进行删除的运算受限的线性表. (1)允许删除的一端称为队头(Front) ...

  2. 可靠联机的 TCP 协议

    可靠联机的 TCP 协议 在前面的 OSI 七层协议当中,在网络层的 IP 之上则是传送层,而传送层的数据打包成什么? 最常见的就是 TCP 封包了.这个 TCP 封包数据必须要能够放到 IP 的数据 ...

  3. HBase学习资源

    教程 <HBase.Administration.Cookbook>  中文版<HBase管理指南> <HBase in action> <HBase权威指南 ...

  4. JNI技术简介-android学习之旅(92)

    分为5步 !!!注意本地方法是java中的方法,本地函数指的是c语言中的对应函数 1.在java类中声明本地方法 2.使用javah命令,生成包含jni本地函数原型的头文件 3. 实现jni本地函数 ...

  5. myeclipse不编译

    错误: org.eclipse.core.internal.registry.configurationElementHandle cannot be cast to org.eclipse.jdt. ...

  6. 关于最新的APP上架流程

    苹果官方在2015年05-06月开发者中心进行了改版,网上的APP Store上架大部分都不一样了,自己研究总结一下,一个最新的上架教程以备后用 1.1.前期工作 首先你需要有一个苹果的开发者帐号,一 ...

  7. Demo4

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. jboss7开发配置指南

    1      Jboss7下载与安装 1.1     官方下载 路径:http://www.jboss.org/jbossas/downloads,目前最新稳定版本为7.1.1 final,分别有zi ...

  9. 【转】学习FFmpeg API – 解码视频

    ffmpeg是编解码的利器,用了很久,以前看过dranger 的教程,非常精彩,受益颇多,是学习ffmpeg api很好的材料.可惜的是其针对的ffmpeg版本已经比较老了,而ffmpeg的更新又很快 ...

  10. Django 2.0 Release note阅读简记

    最前面就是大家都知道的这个版本开始只支持py3.4+,而且下一个大版本就不支持3.4,再就是建议所有插件开始放弃1.11 1.最惊艳的变化,就是URL配置正则表达式的简化,旧的: url(r'^art ...