第4章 伪类和伪元素
4.1结构伪类
E:first-child{},第一个元素
样式：
p:first-child {
color: red;
}<div>
<p>Lorem ipsum</p>
<p>Dolor sit amet.</p>
</div>4.1.1nth-*伪类
以计数为基础的，默认情况下，n代表从0开始的数字，以1递增(1,2,3等等)，但是元素是从1开始的。
这里的*包括child和of-type等等
E:nth-*(n){}，n表示1,2,3...
E:nth-*(2n){}，n表示2,4,6...
E:nth-*(3n){}，n表示3,6,9...
E:nth-*(n+1){}，n表示1,2,3,4...
E:nth-*(2n+1){}，n表示1,3,5...
E:nth-*(3n-1){}，n表示2,5,8...
E:nth-*(even){}，相当于2n，偶数
E:nth-*(odd){}，相当于2n+1，奇数
nth-child与nth-of-type
E:nth-child表示按照当前父元素的所有子元素总数进行选择
E:nth-of-type表示按照特定元素进行选择
案例：
10个段落，CSS如下：
1.所有元素2n+1的底设为grey
2.div中的p中的2n字体设为红色
3.div中的p中的3n字体设为绿色
nth-last-child与nth-last-of-type
与nth-child与nth-of-type类似，不同的是从最后一个元素开始计数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div :nth-child(2n+1) {
background-color: grey;
}
div p:nth-of-type(2n) {
color: red;
}
div p:nth-of-type(odd) {
color: green;
}
</style>
</head>
<body>
<div>
<span>span孙颖莎奥运已打52局</span>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<span>span孙颖莎奥运已打52局</span>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
</div>
</body>
</html>4.1.2 first-of-type、last-child、last-of-type
表示单个的选择，分别是某类型元素第一个，父元素中子元素最后一个，某类型元素最后一个。
4.1.1案例中，去掉CSS后，重写CSS:
1.p元素的第一个字体为red。
2.所有元素最后一个字体为green。
3.span类型最后一个元素字体为pink。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div p:first-of-type {
color: red;
}
div :last-child {
color: green;
}
div span:last-of-type {
color: pink;
}
</style>
</head>
<body>
<div>
<span>span孙颖莎奥运已打52局</span>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<span>span孙颖莎奥运已打52局</span>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
<p>王楚钦回应球拍事件：自己是受害者，“我不想讨论”</p>
</div>
</body>
</html>4.1.3 only-child,only-of-type
only-child表示没有任何兄弟元素
only-of-type表示没有相同类型的兄弟
4.2 其他伪类
4.2.1 target伪类
指向特定元素内部链接，URI指向唯一ID或指定锚点位置。
外部链接：
4.伪类target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="./4.target.html#my_id">Lorem</a>
</body>
</html>同级目录下 4.target.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4 id="my_id" style="color: orange;">Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
<h4>Lorem ipsum</h4>
</body>
</html>将浏览器上下宽度小一点，必须有滚动条，则会发现页面跳转后，会自动滚动到目标位置。
内部链接：
点击前：
点击后：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.comment:target {
background-color: #ddd;
}
</style>
</head>
<body>
<p><a href="#comment-03">最后的评论</a></p>
<div class="comment" style="border: 1px dotted;" id="comment-01">
<p>Thanks for this scintillating example</p>
<p>N.E. Boddy, April 13</p>
</div>
<div class="comment" style="border: 1px dotted;" id="comment-02">
<p>Meh.</p>
<p>Sum1, April 14</p>
</div>
<div class="comment" style="border: 1px dotted;" id="comment-03">
<p>CSS3 is going to be great!</p>
<p>Joe Blogs, April 14</p>
</div>
</body>
</html>4.2.2 empty伪类
选择没有子元素(包括文本节点)的元素
看案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
td:empty {
background-color: red;
}
</style>
</head>
<body>
<table border="">
<thead>
<tr>
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
</thead>
<tr>
<td></td>
<td>Lorem ipsum</td>
<td><span></span></td>
</tr>
</table>
</body>
</html>4.2.3 root伪类与not伪类(基本不用，知道就行)
root伪类：给html一个较高的特殊度，设置html元素后不该被修改。
html:root { background-color: black }
not伪类：选择除了给定参数元素之外的所有元素。
E:not(F) {}
例子：div > :not(p) { color: red; }
4.3 伪元素
可以把样式应用到文档树中根本不存在的元素上。
::first-line 文本中的第一行
::first-letter 文本中的第一个字母
::after 元素之后添加
::before 元素之前
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p::first-line {
background-color: red;
}
p::first-letter {
color: blue;
font-weight: 600;
}
h1::before {
content: "我是h1前面的添加的内容";
color: chocolate;
}
p::after {
content: "我是P后面的内容";
color: brown;
}
</style>
</head>
<body>
<h1>|WWF's Mission Statement</h1>
<p>To stop the degradation of the
planet's natural environment
and to build a future in which
humans live in harmony with nature,
by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is
sustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>小结：UI元素状态，:selection冷门生僻，不学习。
