第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 theplanet's natural environmentand to build a future in whichhumans live in harmony with nature,by; conserving the world's biological diversity, ensuring that the use of renewable natural resources issustainable, and promoting the reduction of pollution and wasteful consumption.|</p>
</body>
</html>小结：UI元素状态，:selection冷门生僻，不学习。
