本文继续介绍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. HTTP通信原理

    HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则.计算机专家设计出HTTP,使HTTP客户(如Web浏览器)能够从HTTP服务器(Web服务器)请求 ...

  2. ARM compiler No such file or directory

    /********************************************************************************* * ARM compiler No ...

  3. GT 940M 到底怎么样！ 768的可以 1080的不要用了

    而对于目前的市场来看,NVIDIA独显无疑是占据了产品端的绝对主力,9系列独显也已经全面上市,但除了大家熟悉的GTX级之外,入门级的更新也同样对入门级玩家有着至关重要的意义,其中最具代表性的莫过于今天 ...

  4. Kafka实战系列--Kafka的安装/配置

    *) 安装和测试 cd /path/to/server#) 下载kafka二进制包wget http://apache.fayea.com/apache-mirror/kafka/0.8.1.1/ka ...

  5. CSS值得关注的那些事？

    CSS值得关注的那些事? CSS层叠样式表的出现,使得样式表现层与HTML结构层分离,CSS样式与HTML结构层次清晰,一目了然.给我们前端开发者带来诸多的便利,然而,在实际前端开发中,还是有相当多的 ...

  6. [ExtJS5学习笔记]第三节 sencha cmd学习笔记 生成应用程序构建的内部细节

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38316829本文作者:sushengmiyan------------------- ...

  7. 使用代理(WebProxy）爬虫

    关键代码: private Hashtable hash;//储存代理ip private WebProxy currentdaili; private int dailiExecMaxCount; ...

  8. phonegap(cordova)环境配置

    首先要配置好  java jdk 和 java jre 环境 配置之后 控制台  javac -version 查看是否配置成功 然后配置 Android sdk 配置之后 控制台 输入 adb 查看 ...

  9. JAVA设计模式之工厂方法模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...

  10. AX2012 referencegroup

    用referencegroup 1.添加EDT,refrecid 2.修改autoidentification 3. 可以直接拖refrecid字段出来,就是referencegroup了