本文继续介绍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. CentOS 基本设置

    CentOS 基本设置 1.更改163源 在使用yum的时候,可能yum被锁,可用如下命令解锁:rm -rf /var/run/yum.id 2.编译安装开源软件 安装自己编译的开源软件一般都会在/u ...

  2. Sprint第二个冲刺（第九天）

    一.Sprint 计划会议: 现在简单说一下Sprint2的进展情况:大部分功能已经完成或者正在做,此次Sprint2中最难的设计商家的数据库表格已经完成了,剩下的其他功能都是比较耗时的,现在也在抓紧 ...

  3. ExpandableListView二级列表

    package com.example.dajj; import android.os.Bundle;import android.app.Activity;import android.view.M ...

  4. JQUERY知识总结

    1, 让页面上某一个已存在的SELECT被选中的JQuery写法  $("#test").find("option[value='3']").prop(&quo ...

  5. 5X + 2Y +Z = 50 的所有非负整数解

    这种题的解题方法都差不多,不停的循环,不过如果做一下细分,效率应该可以提升很多,下面把最常规效率也最低的代码贴上,有时间再优化 #include <iostream> using name ...

  6. TeleportStone.lua --传送宝石

    --[[作者信息: 超级炉石 (Teleport stone) 作者QQ:247321453 作者Email:247321453@qq.com 修改日期:2014-3-12 功能:除了传送,还有召唤N ...

  7. Python scikit-learn机器学习工具包学习笔记：feature_selection模块

    sklearn.feature_selection模块的作用是feature selection,而不是feature extraction.   Univariate feature selecti ...

  8. asp.net ajax 调用一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  9. linux常用命令 (mac )，积少成多

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  10. yII中利用urlManager将URL改写成restful风格 这里主要涉及url显示样式

    1.打开config文件夹下面的mian.php   2.修改内容   如把地址http://www.test.com/index.php?r=site/page/sid/1修改为http://www ...