本文继续介绍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. Swiper说明&&API手册

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  2. 跨域之-jquery操作

    在JQ进行跨域的操作,用的是jsonp的方式,创建script标签,除了跨域的行为外,本地的操作方式都是xmlHttpRequest.

  3. LeetCode-Group Anagrams

    Given an array of strings, group anagrams together. For example, given: ["eat", "tea& ...

  4. 转载-- http接口、api接口、RPC接口、RMI、webservice、Restful等概念

     http接口.api接口.RPC接口.RMI.webservice.Restful等概念 收藏 Linux一叶 https://my.oschina.net/heavenly/blog/499661 ...

  5. ios获取CELLID,LAC等信息方法

    搞了一个来月的这个东西了,还是没有完全解决问题,下面方法可以获取简单的Cell信息,方法一://CoreTelephony.h//主要就这两个结构体,其他需要的话,自己添加struct CTServe ...

  6. mybatis 小于号 转义

    AND lbaq.watch_answer_start_datetime >= #{stm}AND lbaq.watch_answer_end_datetime <= #{etm} 此时报 ...

  7. linux -小记(1) 问题："linux ifconfig查看网卡名称与配置文件不否" 或 启动网卡提示“ eth0 似乎不存在, 初始化操作将被延迟”。

    "linux ifconfig查看网卡名称与配置文件不否" 或 启动网卡提示" eth0 似乎不存在, 初始化操作将被延迟" . 问题 1. service n ...

  8. Abstract和Virtual和interface , 派生类中重写 override / new关键字

    http://www.cnblogs.com/blsong/archive/2010/08/12/1798064.html C#中Abstract和Virtual 在C#的学习中,容易混淆virtua ...

  9. UISwitch控件的使用

    UISwitch控件的作用是提供一个开关给用户,用户可以选择打开或者关闭. UISwitch的基本属性包括: 1.onTintColor:打开状态下的背景颜色 2.thumbTintColor:滑块的 ...

  10. python---PrettyTable

    简介 Python通过prettytable模块将输出内容如表格方式整齐输出,python本身并不内置,需要独立安装该第三方库. 安装 pip install PrettyTable #源码安装 wg ...