本文继续介绍css3新增的选择器。

1.选择器 first-child、last-child、nth-child 和 nth-last-child

利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。

直接看代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        li:first-child{/*第一个子元素*/

            background-color: yellow;

        }

        li:last-child{/*最后一个子元素*/

            background-color: lightblue;

        }

        li:nth-child(3){/*从上往下数第三个子元素*/

            background-color: pink;

        }

        li:nth-last-child(2){/*从下往上数第二个子元素*/

            background-color: firebrick;

        }

    </style>

</head>

<body>

    <h2>列表</h2>

    <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

        <li>列表6</li>

    </ul>

</body>

</html>

效果：

利用奇偶设置样式：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        li:nth-child(odd){/*奇数个元素*/

            background-color: pink;

        }

        li:nth-child(even){/*奇数个元素*/

            background-color: firebrick;

        }

    </style>

</head>

<body>

    <h2>列表</h2>

    <ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

        <li>列表4</li>

        <li>列表5</li>

        <li>列表6</li>

    </ul>

</body>

</html>

效果：

如果多组样式重复，可以直接使用αn+β类型参数，不需要定义n循环：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>css3选择器</title>

    <style type="text/css">

        h2:nth-child(3n+1){

            background-color: pink;

        }

        p:nth-child(3n+2){

            background-color: lightblue;

        }

        p:nth-child(3n){

            background-color: yellowgreen;

        }

    </style>

</head>

<body>

    <h2>标题1</h2>

    <p>内容1</p>

    <p>内容11</p>

    <h2>标题2</h2>

    <p>内容2</p>

    <p>内容21</p>

    <h2>标题3</h2>

    <p>内容3</p>

    <p>内容31</p>

    <h2>标题4</h2>

    <p>内容4</p>

    <p>内容41</p>

</body>

</html>

效果：

2. nth-of-type 和 nth-last-of-type选择器

这两个选择器和刚刚的四个child选择器类似，但是有些情况下利用这两个选择器会避免一些问题发生，下面举例说明。

如下四个段落，我们希望设置标题一和三同色，二和四同色。

    <h2>标题1</h2>

    <p>内容1</p>

    <h2>标题2</h2>

    <p>内容2</p>

    <h2>标题3</h2>

    <p>内容3</p>

    <h2>标题4</h2>

    <p>内容4</p>

如果使用nth-child：

h2:nth-child(odd){

    background-color: pink;

}

h2:nth-child(even){

    background-color: lightblue;

}

效果如下：

因为nth-child在计算子元素时将所有子元素都计算在内了，所以上面的代码中每一个h2都是第奇数个元素，而偶数个元素因为不是h2，所以样式不生效。

这种情况使用nth-of-type可以解决：

h2:nth-of-type(odd){

    background-color: pink;

}

h2:nth-of-type(even){

    background-color: lightblue;

}

nth-of-type只计算父元素下的同类子元素。nth-last-of-type为从后向前数，不再赘述。

3.only-child选择器

使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。当只有一个子元素时，可以使用only-child选择器。

CSS3常用选择器（二）的更多相关文章

  1. CSS3常用选择器（三）

    在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素状态伪类选择器.这些选择器的共同特征: 指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用. 1.hover.focus.a ...

  2. CSS3常用选择器（一）

    在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素.比如最常用到的#id,.class,标签选择器. 随着CSS3到来,增加了很多新型选择器,这里就常用的做一个总结. 1.属性选择器. 在c ...

  3. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  4. CSS3 常用选择器

    p:last-of-type{background-color: red;} 选择p中最后一项 p:nth-of-type(2n){background-color: red;} 隔行变色里面也可以填 ...

  5. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  6. css3的那些高级选择器二

    在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...

  7. 01-css的引入方式和常用选择器

    一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  8. CSS3选择器02—CSS3部分选择器

    该部分主要为CSS3新增的选择器 接上一篇 CSS(CSS3)选择器(1) 一.通用兄弟选择器: 24:E ~ F,匹配任何E元素之后的同级F元素. div ~ p{ background-color ...

  9. CSS3 教程 选择器 标记一下防止 要找时404

    客 » Airen的博客 CSS3 选择器——基本选择器 作者:大漠 日期:2011-08-09 点击:6418  CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运 ...

随机推荐

  1. MINIX3 内核整体架构回顾及内核定 性分析

    MINIX3  内核整体架构回顾及内核定 性分析 12.1 注意事项 由于本文档不对 I/O 文件系统做出分析,所以在此不对 MINIX3 整体做出一个分 析,本章主要是针对内核进程分析.并且这里的模 ...

  2. 在HTML标签<a/>中调用javascript代码

    <a/>标签的“href”属性可以是一个有效的URL,表示跳转的目的地,除此之外,href还可以是一段javascript代码.当为“href”设置javascript代码时,格式如下:& ...

  3. [转]centos 下 autoconf版本升级

    首先查看当前版本 #rpm -qf /usr/bin/autoconf autoconf-2.63-5.1.el6.noarch 卸载当前版本 rpm -e --nodeps autoconf-2.6 ...

  4. 大师教你<部落冲突>如何切换账号

    前提申请两个谷歌账号,账号一和账号二,想要切换账号,只需清除部落冲突在手机上的数据即可.详情请看下文! 1. 第一次登陆,进入游戏后 2. 没有谷歌商店的童鞋,下载谷歌安装器(一键修复)以及VPNFQ ...

  5. VS2013添加解决方案内项目的引用，编译时提示找不到文件

    1.添加解决方案内项目引用 2.编译时报错 原因: 要引用的程序集的Framework版本与当前项目的版本不一致. 解决: 统一引用与被引用程序集的版本.

  6. 建工财务搬家NC变更|rman各种测试|

    1,使用全备份之后的还原不需要建立表空间. 2,归档日志备份之后,使用delete all input,在backup database plus achivelog之后,会在完成备份之后自动删除归档 ...

  7. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  8. discuz论坛与其它网站登录注册整合

    discuz论坛与其它网站登录注册整合 本文以discuz 7.0.0 php版本的论坛与 .net 2.0的网站注册登录整合为类.没有采用uc_center或第三方插件.以另类的方式实现.此方法实现 ...

  9. tracer

    http://people.canonical.com/~acelan/coscup-2010/Debugging%20Linux%20Kernel%20by%20Ftrace.pdf http:// ...

  10. android Tab 类型切换界面

    实现方案:viewpager + fragment + FragmentPagerAdapter 效果图: 可以左右滑动切换选项卡,或者点击: 如果想使用fragment的时候又想可以左右滑动,就可以 ...