css中伪类和伪元素的区别

用处

普通基于元素或基于类的样式定义像这样

p {
color: red;
text-align: center;
}
这样

para1 {

text-align: center;
color: red;

}
或这样

.center {
text-align: center;
color: red;
}
可以看到他们都基于html dom树中具体的类，或者元素进行样式定义 ，但如果想对诸如元素状态变化或位置进行样式定义则需要用到伪类(Pseudo Classes)和伪元素（Pseudo Elements）。比如对一个连接访问后其字体显示方式，一个段落第一句话的颜色字体显示方式等时候我们就需要用到伪类和伪元素了。

定义

顾名思义，伪类和伪元素不是真正意义上的html存在的类和元素，他们的存在是为了方便对状态和位置进行样式定义。

伪元素
对html中真实元素不同位置的指代。一般以两个冒号作为开始，具体语法为：

selector::pseudo-element {
property:value;
}
或

selector.class::pseudo-element {
property:value;
}
示例：定义p元素中内容的第一行为红色小字

p::first-line {
color: #ff0000;
font-variant: small-caps;
}
伪类
对html中物理存在的元素进行动作操作后的状态指代（比如点击后，鼠标移动上面后等），一般以一个冒号做为开始。具体语法如下：

selector:pseudo-class {
property:value;
}

selector.class:pseudo-class {
property:value;
}
示例：定义一个链接访问过后的颜色

a:visited {
color: #00FF00;
}
全家福

css中可以使用的伪类以及伪元素全家福如下：

Selector Example Example description
:link a:link Selects all unvisited links
:visited a:visited Selects all visited links
:active a:active Selects the active link
:hover a:hover Selects links on mouse over
:focus input:focus Selects the input element which has focus
::first-letter p::first-letter Selects the first letter of every

element
::first-line p::first-line Selects the first line of every

element
:first-child p:first-child Selects every

elements that is the first child of its parent
::before p::before Insert content before every

element
::after p::after Insert content after every

element
:lang(language) p:lang(it) Selects every

element with a lang attribute value starting with "it"