以下示例主要讲解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. SQL 脚本中的全角逗号引起【ORA-01756: 引号内的字符串没有正确结束】

    今天运行壹個小程序,功能是读取指定目录下的 SQL 脚本,并加载到内存中批量执行,之前的程序运行良好.但是今天相关开发人员更新了其中壹個 SQL 脚本,于是程序运行的时候就出错了,错误提示信息如下:批 ...

  2. 埃及分解:将2/n分解成为1/x+1/y的格式

    算法 古埃及以前创造出灿烂的人类文明,他们的分数表示却非常令人不解.古埃及喜欢把一个分数分解为类似: 1/a + 1/b 的格式. 这里,a 和 b 必须是不同的两个整数,分子必须为 1 比方,2/1 ...

  3. Knockout官网实例在MVC下的实现-02,实现计次

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. 当次数达到3: View视图 页面包含三个部分:1.显示点击按钮的次数2.button按钮 ...

  4. 33.NET对加密和解密的支持

      散列运算 mscorlib.dll下的System.Security.Cryptography下: 抽象类HashAlgorithm     抽象类MD5         MD5CryptoSer ...

  5. Google Admob广告Android全攻略1

    一.登录Google AdMob中文官网:http://www.google.cn/ads/admob/   ,注册帐号. 1.点击注册AdMob帐号 2.进入Google帐号注册页面,因为要创建一个 ...

  6. SYS.AUD$无法扩容导致无法登录的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/bisal/article/details/19068663 昨天同事说有个测试库无法登录了,用PLS ...

  7. 如何下载android源码与android内核源码

    首先,要分清楚,android的源代码和android的内核代码一般是分开的,要分别进行下载. 1.先下载android的源代码.(这里不包括android的内核代码)      下载最新的源代码,一 ...

  8. Struts2 S标签 数目字格式化成金额输出(保留两位小数)

    JSP: <s:property value="%{formatDouble(price)}" /> Action:添加 //格式化数字显示 public String ...

  9. Android图片加载框架最全解析(二),从源码的角度理解Glide的执行流程

    在本系列的上一篇文章中,我们学习了Glide的基本用法,体验了这个图片加载框架的强大功能,以及它非常简便的API.还没有看过上一篇文章的朋友,建议先去阅读 Android图片加载框架最全解析(一),G ...

  10. Coursera课程《Python数据结构》中课件

    You can access the Google Drive containing all of the current and in-progress lecture slides for thi ...