碰到了个选择器，:nth-of-type

<!DOCTYPE html>

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        p:nth-of-type(odd)//奇数

        {

            background:#cff;

        }

        p:nth-of-type(even)//偶数

        {

            background:#fcc;

        }

    </style>

    </head>

    <body>

        <h1>这是标题</h1>

        <p>第一个段落。</p>

        <div>这是一个div。</div>

        <div>这是一个div。</div>

        <p>第二个段落。</p>

        <p>第三个段落。</p>

        <span>这是一个span。</span>

        <p>第四个段落。</p>

        <p>第五个段落。</p>

    </body>

</html>

奇偶另一种方式

p:nth-of-type(2n+1);

p:nth-of-type(2n);

与nth-child的区别

:nth-child(2)：选择器匹配属于其父元素的第2个子元素，不论元素的类型。p:nth-child(2)前面加了P，则需要同时满足两个条件，父元素的第二个元素，且是p元素。

p:nth-of-type(2)：选择器匹配属于父元素的特定类型（p）的第2个子元素的每个元素。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        .aa p:nth-child(2)//父元素aa下第二个元素，且为p标签

        {

            background:#cff;

        }

        .aa div:nth-child(2)//父元素aa下第二个元素，且为div标签--没有颜色

        {

            background:#ffc;

        }

        .aa p:nth-of-type(2)//父元素aa下第二个p标签

        {

            background:#f00;

        }

        .aa div:nth-of-type(2)//父元素aa下第二个div标签

        {

            background:#faa;

        }

    </style>

</head>

<body>

    <div class="aa">

        <h1>这是标题</h1>

        <p>第一个段落。</p>

        <div>这是一个div。</div>

        <div>这是一个div。</div>

        <p>第二个段落。</p>

        <p>第三个段落。</p>

        <span>这是一个span。</span>

        <p>第四个段落。</p>

        <p>第五个段落。</p>

    </div>

</body>

</html>

CSS3选择器:nth-of-type的更多相关文章

  1. CSS3选择器介绍

    1.css3属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  3. CSS3选择器（三）之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  4. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  5. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  6. CSS3 选择器——属性选择器

    上一节在<CSS3选择器——基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...

  7. css3 选择器（三）

    接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素 ...

  8. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  9. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  10. css3选择器（一）

    直接开始正文. 一.css3同级元素通用选择器[update20161228] 选择器:E~F 匹配任何在E元素之后的同级F元素 Note:E~F选择器选中的是E元素后面同级元素中的全部F元素. 例: ...

随机推荐

  1. 使用dubbo分布式服务框架发布服务及消费服务

    什么是DUBBO DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案. 准备工作 安装zookeeper ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服 ...

  2. [Oracle]快速插入大量（100w）数据

    背景:无论在开发调试或者软件测试中,测试数据的准备是调试/测试执行前重要和必要的一个环节,因此以下几种方式可以快速插入大量数据: 第一种方法: declare   -- Local variables ...

  3. Linux命令学习总结：cp命令

    命令简介: cp命令用来复制文件或目录.指令英文原义:copy 指令所在路径:/bin/cp 命令语法: Usage: cp [OPTION]... [-T] SOURCE DEST or: cp [ ...

  4. Thrift：Quick Start

    Thrift 快速开始 1 Thrift 介绍 目前流行的服务调用方式有很多种,例如基于 SOAP 消息格式的 Web Service,基于 JSON 消息格式的 RESTful 服务等.其中所用到的 ...

  5. ligerDialog的使用

    1.通过ViewBag来传值. @if (ViewBag.ReturnMessage != null) 2.脚本代码: 对话框设计与赋值问题. <script type="text/j ...

  6. [Java入门笔记] Java语言基础（二）：常量、变量与数据类型

    常量与变量 什么是常量和变量 常量与变量都是程序在运行时用来存储数据一块内存空间 常量: 常量的值在程序运行时不能被改变,Java中声明常量必须使用final关键字.常量还可以分为两种意思: 第1种意 ...

  7. android 关闭/开启软件键盘（hideSoftKeyboard）

    /** * 隐藏软键盘 * @param v */ public static void hideSoftKeyboard(View v) { InputMethodManager imm = (In ...

  8. ASP.NET 5 DNX SDK删除旧版本

    ASP.NET 5各种升级后旧版本的DNX不会删除,想删除旧版本的DNX,可以通过以下命令完成 首先打开CMD或者Powershell 1.先输入dnvm看看命令中是否有uninstall 2.如果没 ...

  9. Bean生命周期及BeanFactory

    1.spring通过BeanFactory灵活配置.管理bean,Spring对管理的bean没有任何特别的要求,完全支持对POJO的管理: 2.BeanFactory有个ApplicationCon ...

  10. [转载]彻底弄清struct和typedef struct

    struct和typedef struct 分三块来讲述: 1 首先://注意在C和C++里不同 在C中定义一个结构体类型要用typedef: typedef struct Student { int ...