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模块用于新建子进程.子进程的运行结果储存在系统缓存之中( ...
随机推荐
- Comparable<T> 和 Comparator<T>
相同点: Comparable<T> 和 Comparator<T>都是接口 不同点: 两者声明的方法不同.前者是compareTo()方法,后者是compare()方法. C ...
- 理解PHP数组的序列化和反序列化
当我们想要将数组值存储到数据库时,就可以对数组进行序列化操作,然后将序列化后的值存储到数据库中.其实PHP序列化数组就是将复杂的数组数据类型转换为字符串,方便数组存库操作.对PHP数组进行序列化和反序 ...
- SQLite使用EF6的连接配置
在配置文件中配置连接字符串 1. 使用nuget安装SQLite Install-Package System.Data.SQLite 安装好后的依赖项有: System.Data.SQLite.dl ...
- dos命令行实践
本篇体验使用dos命令行窗口实现各种操作. □ 打开dos命令行窗口 →点击电脑左下角"开始"按钮→点击"运行"→输入"cmd",按回车,来 ...
- Shell下的通配符、特殊符号和文件描写叙述符
一:通配符 * 代表『 0 个到无穷多个』随意字符 演示样例:找出 /etc/ 底下以 cron 为开头的文件名称的文件 [root@instructor Desktop]# ls /etc/cron ...
- Entityframework：启用延时加载的主意事项（只为强化记忆）
Check List 无参的.高于私有访问级别的构造方法(经常忘记). 非封闭的类(默认的非封闭的). DbContext 配置要开启(默认是开启的). 因为我喜欢将类型设置为封闭的,提供有参数的构造 ...
- .NET：CLR via C#The Managed Heap and Garbage Collection
Allocating Resources from the Managed Heap The CLR requires that all objects be allocated from the m ...
- python测试开发django-9.使用navicat连接mysql
前言 navicat 是一个连接数据库的可视化工具,可以连接mysql和oracle做一些简单增删改查,对于初学者来说非常方便的 navicat安装 navicat版本比较多,分享一个我经常用的版本 ...
- 6 cocos2dx粒子效果，类图关系，系统原生粒子和自己定义粒子效果，粒子编译器软件，爆炸粒子效果，烟花效果，火焰效果，流星效果，漩涡粒子效果，雪花效果，烟雾效果，太阳效果，下雨效果
1 粒子 演示样例 2 类图关系 3 系统原生粒子 CCParticleSystem 全部粒子系统的父类 CCParticleSystemPoint. CCParticleSystemQuad ...
- iOS开发-xCode6(iOS 8)中应用程序图标和启动页面设置
iOS8中设置应用程序图标跟之前没有什么变化,命名规则不变,不过至于设置启动页面,网上给的方式很多都是模棱两可的,东平西凑总算是把启动页面的图片设置成功了,iOS设置启动图片有两种方式一种是Launc ...