css 伪类与伪元素以及使用其清除浮动

在开发过程中经常用到伪类与伪元素清除浮动，今天就来梳理一下二者的关系与概念
先来看看官方的解释


从w3c给的解释可以看出伪类与伪元素概念上没有区别，都是向css选择器设置特殊效果。
而二者的区别，举个例子，使用伪元素:after清除浮动后，在页面控制台的html代码中会发现一个::after元素，简单来说就是伪元素使用后会在页面生成元素，而伪类不会。

伪类

:link {color: #FF0000}		/* 未访问的链接 */
:visited {color: #00FF00}	/* 已访问的链接 */
:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
:active {color: #0000FF}	/* 选定的链接 */
:first-child /*首个子元素*/
:last-child  /*最后的子元素*/
:nth-child(number)/*选择第number个子元素*/
:focus	/*向拥有键盘输入焦点的元素添加样式*/

注：伪类可以与css类配合使用

a.red:visited {color: #FF0000;} /*css代码*/

<a class="red" href="css_syntax.asp">CSS Syntax</a>/*html代码*/

伪元素

在实际开发中最多是在清除浮动时使用伪元素，以下只列举清除浮动的方法，还有其他方法可以在w3c中查看

:before{}/*此伪元素可以在元素之前插入内容*/
:after{}/*此伪元素可以在元素之后插入内容*/

使用伪元素清除浮动的方法

:after{
  display: block; /*只有块级元素才能清除浮动*/
  content: '';   /*内容若不设置，会使属性失效*/
  clear: both;   
}

使用：before与：after还可以设置一些样式

导航条样式
实现思路：

1. ：before作为背景，设置属性背景等属性
2. 元素为透明条
3. ：after为白色中心原点