CSS系列之伪类和伪元素的区别

[yuanyuanbyte]

什么是伪类？

伪类用于定义元素的特殊状态。

例如，它可以用于：

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

伪类开头为单冒号 ：

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

什么是伪元素？

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

伪元素开头为双冒号 ::

::before /* 元素内容前插入新内容 */
::after /* 元素内容之后插入新内容 */
::first-letter /* 文本首字母。常用于对文本首字母设置样式 */
::first-line /* 文本首行。常用于对文本首行设置样式。仅用于块级元素 */
::selection /* 选中的内容。常用于文本 */
::placeholder /* 占位符。用于设置占位符的样式 */