伪元素与伪类

一、伪类和伪元素的区别：

伪类：
写法：一个冒号“:”，例如 :first-child
作用的对象：是整个元素
伪类没有创造元素，只是给子元素添加样式

伪元素：
写法：两个冒号“::”，例如 ::first-letter
作用的对象：于元素的一部分，一个段落的第一行或第一个字母
伪元素相当于创造了一个元素，然后添加了相应的效果

注意：
为了区分伪类和伪元素，CSS3进行了规范；:用于伪类，::用于伪元素；
例外：:before和 ::before 无论是单引号还是双引号before的用法都是一样的。

用法：

/* content 可以添加内容 */
.one::after{
	content:" 哈哈 ";
}
.one:hover{
	color: red;
}

<div class="one"></div>

二、常见伪类和伪元素种类

常见伪类的种类：

1、动态伪类选择器

不存在与HTML中，只有在动态交互时才使用

active 选择所有有效值的属性
link 选择所有未访问链接
hover 把鼠标放在链接上的状态
visited 选择正在活动链接
lang 指定 lang 属性开始的元素添加样式
focus 选择元素输入后具有焦点

2、UI元素状态伪类选择器

元素分为不同的状态，常用于表单之中

disable 指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式
:cehcked 指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式

3、结构伪类选择器

很大程度上简化了HTML的的文本结构，让HTML更语义化更结构化。减少了文档中class和id的使用。

:first-child 选择第一个子元素
:last-child 选择元素最后一个子元素
:nth-child() 选择某元素一个或是多个特定的子元素
:nth-last-child() 选择某个元素一个或是多个特定的子元素，从这个子元素的最后一个子元素开始计算
:nth-of-type() 选择指定的元素
:nth-last-of-type() 选择指定元素，从元素最后一个值开始计算
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素下的最后一个同类子元素
:only-child 选择父元素的唯一一个子元素
:only-of-type 选择一个元素是它上级元素的唯一一个相同类型的子元素
:empty 选择的元素里面没有任何内容

常见伪元素的种类：

::first-letter 将特殊的样式添加到文本的首字母
::first-line 将特殊的样式添加到文本的首行
::before 在某元素之前插入某些内容
::after 在某元素之后插入内容
::selection 匹配元素中被用户选中或处于高亮状态的部分
::backdrop 给下层文档设置样式或隐藏它