以下示例主要讲解nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type使用。

示例代码:

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>CSS 高级选择器使用</title>
<style>
* {
padding: 0;
margin: 0;
}
/*IE8不支持 IE9支持*/ li:nth-child(3n+1) {
color: red;
}
/*IE7+以上浏览器均支持*/ li:first-child {
color: blue;
}
/*IE8不支持 IE9以上支持*/ li:last-child {
color: green;
}
/*IE8不支持 IE9以上支持*/ li:nth-of-type(odd) {
color: #8D8D8D;
}
/*IE8不支持 IE9以上支持*/ li:first-of-type {
color: #92B8B1;
}
/*IE8不支持 IE9以上支持*/ li:last-of-type {
color: #2E2D3C;
}
</style>
</head> <body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
</ul>
</body> </html>

总结:

除了first-child选择器兼容IE7+以上外,其他选择器均需要IE9以上浏览器才能兼容

CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用的更多相关文章

  1. 安卓自己定义对话框及The specified child already has a child问题

    问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...

  2. Django 导入css文件,样式不起作用。Resource interpreted as Stylesheet but transferred with MIME type application/x-css

    笔者今天在模板中加载css文件时,发现 css样式能够下载再来却无法起作用,而且,图片.js都能够正常使用. 并且 浏览器提示: Resource interpreted as Stylesheet ...

  3. MapReduce剖析笔记之七:Child子进程处理Map和Reduce任务的主要流程

    在上一节我们分析了TaskTracker如何对JobTracker分配过来的任务进行初始化,并创建各类JVM启动所需的信息,最终创建JVM的整个过程,本节我们继续来看,JVM启动后,执行的是Child ...

  4. Child <- many-to-one ->Parent

    网上找到个描述的很精妙的例子 Child   <-   many-to-one   ->Parent         class   Child   {         private   ...

  5. [NHibernate]Parent/Child

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  6. Binary Tree: Write a function to return count of nodes in binary tree which has only one child.

    June 8, 2015 我最喜欢的一道算法题目, 二行代码. 编程序需要很强的逻辑思维, 严密,我还没有很好训练自己.想一想, 二行代码, 五分钟就可以搞定; 最近这几天网上大家热议的 Homebr ...

  7. Pass value from child popup window to parent page window using JavaScript--reference

    Here Mudassar Ahmed Khan has explained how to pass value from child popup window to parent page wind ...

  8. cf437A The Child and Homework

    A. The Child and Homework time limit per test 1 second memory limit per test 256 megabytes input sta ...

  9. Codeforces Round #250 (Div. 2)—A. The Child and Homework

         好题啊,被HACK了.曾经做题都是人数越来越多.这次比赛 PASS人数 从2000直掉 1000人  被HACK  1000多人! ! ! ! 没见过的科技啊 1 2 4 8 这组数 被黑的 ...

  10. Child Process模块

    目录 exec() execSync() execFile() spawn() fork() send() 参考链接 child_process模块用于新建子进程.子进程的运行结果储存在系统缓存之中( ...

随机推荐

  1. 重温PHP之快速排序

    基本原理:选出当前数组中任一元素(通常为第一个)作为标准,新建两个空数组分别置于当前数组前后,然后遍历当前数组,如果数组中元素值小于等于第一个元素值就放到前边空数组,否则放到后边空数组. //快速排序 ...

  2. HDU 4720 Naive and Silly Muggles (简单计算几何)

    Naive and Silly Muggles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  3. FT232H USB转串口,I2C,JTAG高速芯片

    随着FT232H USB2.0高速芯片的发布,英商飞特蒂亚公司(FTDI)进一步巩固了其在USB接口集成电路产品的地位.此款多功能的单通道USB转UART/FIFO接口设备可通过EEPROM配置为各种 ...

  4. http://bbs.chinaunix.net/thread-169061-1-1.html

    http://bbs.chinaunix.net/thread-169061-1-1.html

  5. MVC到底使用哪种方式传递Model,在ViewData、ViewBag、PartialView、TempData、ViewModel、Tuple之间取舍

    在"MVC控制器传递多个Model到视图,使用ViewData, ViewBag, 部分视图, TempData, ViewModel, Tuple"中,体验了使用不同的方式传递多 ...

  6. MVC文件上传09-使用客户端jQuery-File-Upload插件和服务端Backload组件让每个用户有专属文件夹,并在其中创建分类子文件夹

    为用户创建专属上传文件夹后,如果想在其中再创建分类子文件夹,该怎么做?可以在提交文件的视图中再添加一个隐藏域,并设置 name="uploadContext". 相关兄弟篇: MV ...

  7. 一个对 Dijkstra 的采访视频

    之前在微博上推荐了一个对 Dijkstra 的采访视频,看了两遍之后觉得实在很好,所以再正式推荐一下.大部分人可能都知道他对图论算法和操作系统的贡献,而其实 Dijkstra 在程序语言上的造诣也很深 ...

  8. Access control configuration prevents your request from being allo

    我发现在在XP环境下我输入网易的220.181.28.42也找不到网页,就跟在LINUX下一样 都揭示: 错误 您所请求的网址(URL)无法获取 --------------------------- ...

  9. [翻译] FMDB

    FMDB https://github.com/ccgus/fmdb This is an Objective-C wrapper around SQLite: http://sqlite.org/ ...

  10. struts2 iterator 迭代标签只显示前五条记录

    <s:iterator value="#session.produceLists" var="produce" begin="0" e ...