CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。

这些新的样式已被现代浏览器及IE9以上支持。

 选择器  说明
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(3) 第三个子元素
:nth-last-child(3)  倒数第三个子元素
:nth-child(odd) 所有奇数个子元素
:nth-child(even) 所有偶数个子元素
div h2:nth-of-type(even) div 中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)
:nth-last-of-type 反过来计算
li:nth-child(4n+1) 循环样式 匹配第1，5，9...个li
li:nth-child(4n+2) 循环样式 匹配第2，6，10...个li
li:nth-child(4n+4) 可简写为 li:nth-child(4n)
ul li:first-child:last-child 是第一个也是最后一个，即匹配ul中只有一个li.
:only-child 上面的简写形式。匹配某个父元素只有一个子元素
   

h2:nth-child(3) 与 h2:nth-of-type(3) 的区别？

h2:nth-child(3) 指 第三个子元素中正好是h2则应用该样式

h2:nth-of-type(3) 指所有的h2子元素的合集中，对第三个h2应用该样式

<style type="text/css">

    h2:nth-child(3){

        background-color:green;

    }

    h2:nth-of-type(3){

        background-color:#e00;

    }

</style>

</head>

<body>

<div>

<h2>文章标题A</h2>

<p>文章正文。</p>

<h2>文章标题B</h2>

<p>文章正文。</p>

<h2>文章标题C</h2>

<p>文章正文。</p>

<h2>文章标题D</h2>

<p>文章正文。</p>

</div>

</body>

结果：

循环样式的使用区别？

<style type="text/css">
/*对第1，5，9个li标签应用样式*/

li:nth-child(4n+1) {

    background-color: yellow;

}
/*对第2，6，10个li标签应用样式*/

li:nth-child(4n+2) {

    background-color: limegreen;

}

li:nth-child(4n+3) {

    background-color: red;

}

li:nth-child(4n) {

    background-color: #999;

}

</style>

</head>

<body>

<ul>

<li>列表项目1</li>

<li>列表项目2</li>

<li>列表项目3</li>

<li>列表项目4</li>

<li>列表项目5</li>

<li>列表项目6</li>

<li>列表项目7</li>

<li>列表项目8</li>

<li>列表项目9</li>

<li>列表项目10</li>

<li>列表项目11</li>

<li>列表项目12</li>

</ul>

</body>

效果：

:nth-child(1)       　　等价于 :first-child

:nth-last-child(1) 　　等价于 :last-child

:first-child:last-child   等价于 :only-child

CSS3 子节点选择器的更多相关文章

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

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

  2. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  3. 5月25日-js操作DOM遍历子节点

    一.遍历节点 遍历子节点 children();//获取节点的所有直接子类 遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配 ...

  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的nth-child() 选择器

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

  7. 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)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...

  8. JavaScript DOM查询，原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  9. CSS3的nth-child() 选择器，表格奇偶行变色

    nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...

随机推荐

  1. bzoj5152 [Wc2018]通道

    题目链接 正解:不会做. 写一个爬山算法就过官方数据了(逃 具体来说就是每次随机一个根,然后迭代找最长路的那个点. 多随机几次取$max$就行了.正解以后再补.. #include <bits/ ...

  2. Linux 查看所有登录用户的操作历史

    在linux系统的环境下,不管是root用户还是其它的用户只有登陆系统后用进入操作我们都可以通过命令history来查看历史记录,可是假如一台服务器多人登陆,一天因为某人误操作了删除了重要的数据.这时 ...

  3. 【转】XZip and XUnzip - Add zip and/or unzip to your app with no extra .lib or .dll

    原文:http://www.codeproject.com/Articles/4135/XZip-and-XUnzip-Add-zip-and-or-unzip-to-your-app-w Downl ...

  4. docker-3-常用命令（中）

    容器命令 1.有镜像才能创建容器,这是根本前提(下载一个CentOS镜像演示) docker pull centos 2.新建并启动容器 docker run [OPTIONS] IMAGE [COM ...

  5. iOS 帧动画之翻转和旋转动画

    记录两个比较简单的动画,一个是翻转的动画,一个是旋转的动画. 旋转动画: 1 [UIView animateWithDuration:3 animations:^{ if (formView) { f ...

  6. PHP实现数组递归转义的方法

    本文以实例形式讲述了PHP实现数组递归转义的方法,分享给大家供大家参考之用.具体方法如下: 主要功能代码如下: $arr = array('a"aa',array("c'd&quo ...

  7. 图形解析理解 css3 之倾斜属性skew()

    1.作用 改变元素在页面中的形状2.语法 属性:transform 函数: 1.skew(xdeg) 向横向倾斜指定度数 x取值为正,X轴不动,y轴逆时针倾斜一定角度 x取值为负,X轴不动,y轴顺时针 ...

  8. Deepin深度Linux系统安装记录

    测试设备:小米游戏本,最新版15.6进入安装后发现黑屏,所以使用15.5安装 Deepin 15.5 官方介绍页 官方下载 百度云下载 下载后得到文件夹15.5 Release 将里面的ISO镜像文件 ...

  9. 【TOJ 3600】Fibonacci II （对数+斐波那契通项式）

    描述 2007年到来了.经过2006年一年的修炼,数学神童zouyu终于把0到100000000的Fibonacci数列(f[0]=0,f[1]=1;f[i] = f[i-1]+f[i-2](i> ...

  10. 学习笔记 - Ford-Fulkerson & EK

    Ford-Fulkerson & EK - 学习笔记 之前网络流什么的快忘完了 老师讲课的时候一脸懵逼--开始系统复习,从最大流开始 标签:网络流-最大流 『预备』 首先复习了网络流的概念-- ...