伪类选择器：选择某些元素更加方便（是否添加了 type，last）
a）之前学习的：a:hovar a:link a:active a:visted
b）以某元素相对于其父元素 或 兄弟元素的位置来获取元素的 结构伪类。
E:first-child: 查找E这个元素的父元素的第一个子元素E
E:last-child: 查找最后一个元素
E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素。
E:nth-last-child(n): 类似上面的，只不过是，倒着计算。
E:nth-child(even):所有的偶数
E:nth-child(odd):所有的奇数
E:nth-of-type(n):指定类型
E:empty 选中没有任何子节点的E元素，注意，空格也算是子元素。
E:target 结合锚点进行使用，处于当前锚点的元素会被选中。
重点说明：n遵循线性变化，其取值0，1,2,3，......但是当n<=0时，选取无效。
n还有很多种样式：nth-child(2n)偶数，nth-child(2n+1)奇数，nth-child(-n+5)前面5个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器：相对于父元素的伪类</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
width: 700px;
height: 500px;
margin: 0 auto;
margin-top: 100px;
list-style: none;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
}
ul>li {
float: left;
width: 100px;
box-sizing: border-box;
height: 100px;
line-height: 100px;
text-align: center;
background-color: #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
/* E:first-child: 查找E这个元素的父级别元素的第一个E元素，
在查找的时候，并不会限制查找的元素的类型。
下面是查找li的父元素中的第一个li元素
1.相对当前指定元素的父元素，
2.查找的类型必须是指定类型）。*/
li:first-child {
/* color: red; */
}
/* 查找E元素的父元素中最后一个指定类型的子元素 */
li:last-child {
background-color: skyblue;
}
/* 查找的时候，限制类型选择器 first-of-type，比first-child更加实用
1. 也是相对父元素查找
2. 查找的时候，只会查找符合限制条件类型的第一个子元素，可以过滤掉其他类型的元素span。
*/
li:first-of-type {
color: red;
}
li:last-of-type {
color: hotpink;
}
/* 指定索引位置 nth:child(从1开始的索引 或关键字 或表达式) */
/* 索引，取某一个 */
li:nth-child(5) {
background-color: lightcoral;
}
/* 偶数个，添加背景（关键字） */
/* li:nth-child(even) {
background-color: orange;
}
li:nth-child(odd) {
background-color: yellow;
} */
/* 限定类型的，添加背景 */
li:nth-of-type(even) {
background-color: orange;
}
li:nth-of-type(odd) {
background-color: yellow;
}
/* 表达式：想为最前的5各元素，添加样式.
使得括号中的表达式，是个范围，是1-5（-n+5）
0》5
1》4
...
4》1
5》0
*/
li:nth-of-type(-n+5) {
background-color: red;
font-size: 30px;
}
/* 最后的5个元素. */
li:nth-last-of-type(-n+5) {
background-color: red;
font-size: 30px;
}
/* 空值:没任何内容，连空格都没有 */
li:empty {
background-color: beige;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li></li>
......
<li>34</li>
<li>35</li>
</ul>
</body>
</html>
伪类样式选择器：target
<html>
<head>
<meta charset="utf-8">
<!-- -->
<title>伪类样式target</title>
<style>
/* E:target: 可以为锚点目标元素添加样式，当目标元素被处罚为当前锚链接的目标的时候
调用此伪类样式*/
h2: target {
color:red;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#title1">CSS样式</a></li>
<li><a href="#title2">例子</a></li>
<li><a href="#title3">发展历史</a></li>
</ul>
<div class="content">
<h2 id="title1">CSS样式</h2>
<p>层叠样式表1。。。。。。。。。。。。。。。。。。。。</p>
<p>层叠演示表2。。。。。。。。。。。。。。。。。。。。</p>
<p>层叠演示表3。。。。。。。。。。。。。。。。。。。。</p>
<p>层叠演示表4。。。。。。。。。。。。。。。。。。。。</p>
</div>
</body>
</html>