CSS nth-child、first-child、last-child、nth-of-type、first-of-type和last-of-type选择器使用
以下示例主要讲解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选择器使用的更多相关文章
- 安卓自己定义对话框及The specified child already has a child问题
问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...
- Django 导入css文件，样式不起作用。Resource interpreted as Stylesheet but transferred with MIME type application/x-css
笔者今天在模板中加载css文件时,发现 css样式能够下载再来却无法起作用,而且,图片.js都能够正常使用. 并且 浏览器提示: Resource interpreted as Stylesheet ...
- MapReduce剖析笔记之七：Child子进程处理Map和Reduce任务的主要流程
在上一节我们分析了TaskTracker如何对JobTracker分配过来的任务进行初始化,并创建各类JVM启动所需的信息,最终创建JVM的整个过程,本节我们继续来看,JVM启动后,执行的是Child ...
- Child <- many-to-one ->Parent
网上找到个描述的很精妙的例子 Child <- many-to-one ->Parent class Child { private ...
- [NHibernate]Parent/Child
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...
- Binary Tree: Write a function to return count of nodes in binary tree which has only one child.
June 8, 2015 我最喜欢的一道算法题目, 二行代码. 编程序需要很强的逻辑思维, 严密,我还没有很好训练自己．想一想, 二行代码, 五分钟就可以搞定; 最近这几天网上大家热议的 Homebr ...
- 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 ...
- cf437A The Child and Homework
A. The Child and Homework time limit per test 1 second memory limit per test 256 megabytes input sta ...
- Codeforces Round #250 (Div. 2)—A. The Child and Homework
好题啊,被HACK了.曾经做题都是人数越来越多.这次比赛 PASS人数 从2000直掉 1000人 被HACK 1000多人! ! ! ! 没见过的科技啊 1 2 4 8 这组数 被黑的 ...
- Child Process模块
目录 exec() execSync() execFile() spawn() fork() send() 参考链接 child_process模块用于新建子进程.子进程的运行结果储存在系统缓存之中( ...
随机推荐
- 理解linux下源码、yum和rpm安装方法的特点
1.yum可看作在线安装,只需yum install 软件名,系统就自动根据yum源配置文件中的镜像位置去下载安装包,并可以自动分析所需的软件依赖关系,自动安装所需的依赖软件包.简单方便,不易出错,不 ...
- MySQL多表联查之ThinkPHP中的实现
创建两个表如图: sp_user表: sp_dept表: 目的:通过sp_user的dept_id查询所属部门即sp_dept中的name. 原生sq方法一:select t1.*,t2.name a ...
- 如何在windows server 2008上配置NLB群集
参考:http://zlwdouhao.blog.51cto.com/731028/781828 前些天写了一篇关于NLB群集模式多播和单播的简单介绍.那么下面我们一起来探讨一下,如何在windows ...
- perf 移植
perf 移植 perf工具用于系统性能的调优,程序优化.源码在kenel/tools/perf目录. 我在imx6平台上进行移植.将自己的移植过程记录如下. 参考链接 http://blog.csd ...
- HTTP协议状态码详解（HTTP Status Code）（转）
原文链接:HTTP协议状态码详解(HTTP Status Code) 使用ASP.NET/PHP/JSP 或者javascript都会用到http的不同状态,一些常见的状态码为: 200 – 服务器成 ...
- 用SBT编译Spark的WordCount程序
问题导读: 1.什么是sbt? 2.sbt项目环境如何建立? 3.如何使用sbt编译打包scala? sbt介绍 sbt是一个代码编译工具,是scala界的mvn,可以编译scala,java等,需要 ...
- OpenCV学习(37) 人脸识别(2)
在前面一篇教程中,我们学习了OpenCV中基于特征脸的人脸识别的代码实现,我们通过代码 Ptr<FaceRecognizer> model = createEigenFaceR ...
- hdu 4548 美素数 超级大水题
美素数 Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total Submis ...
- LZO 使用和介绍
LZO说明 摘要 LZO 是一个用 ANSI C 语言编写的无损压缩库.他能够提供非常快速的压缩和解压功能.解压并不需要内存的支持.即使使用非常大的压缩比例进行缓慢压缩出的数据,依然能够非常快速的解压 ...
- 关于ListView中getView被重复调用的问题
我用ListView显示数据时,自定义了一个适配器(extends ArrayAdapter),然后重写了getView方法,现在出现一个问题,就是这个getView()方法被重复调用了,比如我的_d ...