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下以特定用户运行命令
方法汇总: 1.su 2.sudo 3.runuser 比较常用的方式:su 示例:su - root -s /bin/sh -c "/usr/local/nginx/sbin/nginx& ...
- html div 宽度随着浏览器自动适应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 全栈project师体能备战--知识面（1--10）
javascript 单例设计模式: 单例模式确保某个类仅仅有一个势力,并且自行实例化并向整个系统提供这个实例.如:cocos2dx中的导演类.[样例]我有6哥美丽的老婆,他们的老公都 ...
- VMware Workstation 14 Pro 激活密钥
VMware Workstation 14 Pro 激活密钥 CG54H-D8D0H-H8DHY-C6X7X-N2KG6 ZC3WK-AFXEK-488JP-A7MQX-XL8YF AC5XK-0ZD ...
- [MAC OS] NSOpenPanel 使用
Mac OS开启沙盒之后,文件的保存会涉及到一个权限问题.如下图,在Capabilities中,可以勾选的权限一共有5种. User Selected File 必须勾选,否则 NSOpenPanel ...
- C++类模板的声明和定义为什么要放在同一个文件
不是只能放在.h里面,但是推荐放在.h里面.STL模板实现全部是放在.h里面的.------------------编译能通过.1)参与编译的只是.cpp文件,不会报错的原因,是因为它能在.h里面找到 ...
- 第一章 第一个spring boot程序
环境: jdk:1.8.0_73 maven:3.3.9 spring-boot:1.2.5.RELEASE(在pom.xml中指定了) 注意:关于spring-boot的支持, 最少使用jdk7(j ...
- C++ Explicit Constructors(显式构造函数)
C++ 为类(Class)提供了许多默认函数.如果自己没有申明,编译器会为我们提供一个copy构造函数.一个copy assignment操作符和一个析构函数.此外,如果没有申明任何构造函数,编译器会 ...
- java 解析 XML实例
package com.hseact.fecp.servlet; import java.io.IOException; import javax.xml.parsers.DocumentBuilde ...
- 未知高度的图片在div设置垂直居中
方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...