伪类选择器、伪元素

参考链接

• ::before和::after伪元素的用法

可以类比css中的类，伪类选择器、伪元素也是一种选择器，只是它们书写时比类多一个点

伪类选择器

常见的伪类选择器是与链接相关的选择器，:link、:visited、:hover、:active，以及:focus、:nth-child(n)、:nth-of-type(n)、:target,:not()等

:active大致效果为用鼠标点击时，元素增加特效，鼠标松开时，特效消失。多用在按钮的点击上
当我们需要让点击之后的元素一直拥有某些样式，这时用:active就不行了，因为松开鼠标样式会消失。:focus可以用在<input>标签上

:target 选择器可用于选取文档当前活动的目标元素。如当页面跳转到某锚点时，该锚点元素就是目标元素。例子target.html

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接，链接相关伪类选择器简记：love hate*/

input[type="text"]:focus {border: 1px solid black;} /* 改变获得焦点的文本框的边框样式 */

伪元素

常见的伪元素有:before、:after、:first-letter、:first-line

属性	描述
:before	向元素之前添加内容
:after	在元素之后添加内容
:first-letter	文本的第一个字母添加样式
:first-line	向文本的首行添加特殊样式

:before和:after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标。
举例：网站有些联系电话，希望在它们前加一个icon☎，就可以使用:before伪元素，如下：

.phoneNumber:before {
   content:'\260E';
   font-size: 15px;
}

<p class="phoneNumber">12345645654</p>

常用例子，如清除浮动

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
 }
.clearfix:after {
  clear: both;
}