本文继续介绍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. Day18_集合第四天

    1.Map集合成员方法(掌握) 增加功能 V put(K key, V value) 当key在集合中不存在时,添加元素:当key在集合存在时候,替换元素 删除功能 void clear 清除所有键值 ...

  2. H5版俄罗斯方块(1)---需求分析和目标创新

    前言: 俄罗斯方块和五子棋一样, 规则简单, 上手容易. 几乎每个开发者, 都会在其青春年华时, 签下"xx到此一游". 犹记得大一老师在布置大程作业的时候提过: "什么 ...

  3. LintCode Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  4. RouteArea中AreaPrefix(Area 前缀)的使用

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  5. UVA 11235 频繁出现的数值 RMQ

    题目链接: http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  6. 2016HUAS_ACM暑假集训2D - 敌兵布阵

    刚开始接触线段树,不得不说,每次接触到一个新的数据结构,都会是一场头脑风暴的“盛宴”.希望我能继续痛苦并快乐着学下去.我相信,有各路大神的博客相助,我还是能坚持下去的. 这个题目是HDU的1166,只 ...

  7. MongoDB学习笔记四：索引

    索引就是用来加速查询的.创建数据库索引就像确定如何组织书的索引一样.但是你的优势是知道今后做何种查询,以及哪些内容需要快速查找.比如:所有的查询都包括"date"键,那么很可能(至 ...

  8. 反编译dtsi

    dtsi机制是linux kernel为了适配多设备做出来的模块,产品线拉的较长的话用它来控制最合适不过了.初步阅读了下代码和接口清晰简洁. 这个东东出来的时候xml/json应该比较成熟了,疑惑的是 ...

  9. Knockoutjs实例 - 属性绑定(Bindings)之流程控制(Control flow)

    一.foreach binding 使用此功能可以方便我们循环遍历输出某个数组.集合中的内容. (1).循环遍历输出数组 View Row Code 1 <script type="t ...

  10. 【java】spring-data-jpa 集成hibernate实现多条件分页查询

    初次接触spring-data-jpa,实现多条件分页查询. 基础环境 Spring Boot+spring-data-jpa+hibernate+mysql 1.接口 要继承这个接口,这个接口提供了 ...