<a href="https://baidu.com">百度</a>————————————————a:link { color: red;}a:visited { color: green;}a:hover { color: pink;}a:active { color: blue;}
3、结构（位置）伪类选择器（13种）
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。
用法及作用：
E:fisrt-child ：选择父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child ：作选择父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even‘奇数’，odd‘偶数’）、可以是公式（2n+1）,而且n值起始值为1，而不是0.
E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同
E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同
E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同
E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素
E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素
E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点
E:not(F)：匹配所有除元素F外的E元素
实例：111为红色，444为蓝色，222为白色，333为绿色
PS：.father div:first-child father下的第一个div
<div class="father"> <div>111</div> <div>222</div> <div>333</div> <div>444</div></div>————————————————.father div:first-child{ color: red;}.father div:last-child{ color: blue;}.father div:nth-child(2){ color: white;}.father div:nth-last-child(2){ color: green;}
六、伪元素选择器（6种）
伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
用法及作用：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 选中的内容
::before 元素的开始位置
::after 元素的结束位置
before和after必须要结合content使用
实例：
<p> hello word</p>————————————————/* 需求一：让文章的首字母一直为字体为24px */p::first-letter { font-size: 24px;}/* 需求二：让文章的第一行添加背景色黄色 */p::first-line { background: yellow;}/* 需求三：让选中的内容，字体为红色 */p::selection { color:red}/* 需求四：在元素开始的位置前+'abc' */p::before{ content: '你好'; color:red}
本文地址：IT问答频道 https://www.hkm168.com/itwenda/930903_3.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
