一、伪类
1.概念
伪类是CSS中的一种选择器，用于选择处于特定状态的元素。它们以冒号 （ ：）开头，主要运用于导航栏或者超链接的样式设计。
在默认的浏览器方式下,超链接统一为蓝色并且带有下画线。访问过的超链接则为紫色并且也有下画线。可以通过 css可以设置超链接（点击了解更多）的各种属性，而且通过伪类还可以制作不同超链接风格。
2.属性
- :link：访问前的样式
- :active：点击时的样式
- :visited：访问后的样式
- :hover：鼠标悬停在上面的样式
需要说明的是，这 4 种状态的顺序不能颠倒。否则可能会导致伪类样式不能实现。这4种状态并不是每次都要用到,一般情况下只需要定义链接标签的样式以及：:hover 伪类样式即可。
运行代码如下：
<style>/* 伪类选择器 :主要用于导航栏或者超链接的样式设计*/.clear_ele a{text-decoration: none; /* 解决下划线问题 */}.clear_ele a:link{color: black; /* 访问前的样式 */} .clear_ele a:visited{color: green; /* 访问后的样式 */}.clear_ele a:hover{color: red; /* 鼠标悬停在上面，文字的颜色 */text-decoration: underline;}/* :link 访问前的样式 | :active 点击时的样式 | :visited 访问后的样式 | :hover 鼠标放在上面时的样式 */
</style>
<body><section class="clear_ele"><a href="#">百度一下，你就知道</a></section>
</body>
</html>运行结果如下：
访问前样式：
鼠标悬停时：
访问后样式：
二、伪元素（虚拟元素）
1.概念
伪元素可以创建一些不在文档树中的元素，并为其添加样式。它们以双冒号 （ :: ）开头，其中，::before 和 ::after 伪元素是最为常用的。
2.属性
::before 伪元素可以在元素内容的前面插入额外的内容。比如，我们可以为一个标题添加一个装饰性的图标，通过::before 伪元素来实现。
::after 伪元素则在元素内容的后面插入内容。例如，为一个段落添加下划线效果，或者在列表项后面添加一个特殊的符号。
3.解决高度塌陷
伪元素选择器是实际工程项目开发中用的解决高度塌陷的主流方案。
运行代码如下：
<style>#div1{width: 25%;height: 300px;border: 2px black solid;background-color: springgreen;float: left;}#div2{width: 25%;height: 300px;border: 2px black solid;background-color: cornflowerblue;float: left;}footer{width: 100%;height: 30px;background-color: tomato;border: 2px black solid;text-align: center;}section{border: 4px black solid;background-color: gray;}/* 实际工程项目开发中用的解决高度塌陷的主流方案：伪元素选择题 */.clear_ele::after{content: ""; /* 必须配置属性，代表伪盒子存在 */display: block;clear: both;}</style>
<body><section class="clear_ele"><!-- ::before --><div id="div1"></div><div id="div2"></div><!--第二方案直接在下面加伪元素，不推荐 --><!-- <div style="clear: both;"></div> --> <!-- 伪元素：虚拟元素 --><!-- ::after --></section><footer>网页页脚</footer>
</body>
</html>运行结果如下：
在“揭秘CSS浮动盒：掌握高度塌陷修复、文字环绕特效示艺的秘籍！！（重点秘籍！！）”中，我们也讲到如果父盒由于各种原因未设置高度， 子盒的浮动会导致父盒的高度塌陷。可以回顾一下！！！