CSS3新增选择器
1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素
<style type="text/css">
.list div:nth-child(2){
background-color:red;
}
</style>
......
<div class="list">
<h2>1</h2>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<!-- 第2个子元素div匹配 -->
2、E:first-child:匹配元素类型为E且是父元素的第一个子元素
3、E:last-child:匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 匹配第二个类型是div子元素 */
.con div:nth-child(2){
color:red;
}
.con div:nth-child(3){
color:pink;
}
/*
.list li:nth-child(1){
background-color:red;
}
等同于下面的写法:
*/
.list li:first-child{
background-color:red;
}
/* .list li:nth-child(8){
background-color:green;
}
等同于下面的写法:
*/
.list li:last-child{
background-color:green;
}
/*
2n:偶数行;
2n+1:奇数行;
*/
.list2 li:nth-child(2n+1){
background-color:gold;
}
</style>
</head>
<body>
<div class="con">
<h3>标题</h3>
<div>这是一个div</div>