卡卡网

伪元素和伪类，无论在名称上还是语法上，都很相似，很多人刚接触时容易混淆。本文将告诉你，弄清这两点，你就知道伪元素与伪类的区别了。

1、语法的区别

按照规范，伪元素使用双冒号（::），而伪类使用单个冒号（:），以便区分伪元素和伪类。

伪元素语法

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

一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。

伪类语法

selector:pseudo-class {
  property: value;
}

类似于普通的类，你可以在一个选择器中同时一起写多个伪类。

2、概念的区别

伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式，例如，下例中的 ::first-line 伪元素可改变段落首行文字的样式。

/* 每一个 <p> 元素的第一行。 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

常见标准伪元素有::before (:before)，::after (:after)，::first-letter (:first-letter)，::first-line (:first-line)等。

伪类

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

/* 所有用户指针悬停的按钮 */
button:hover {
  color: blue;
}

常见标准伪类有:active，:hover，:checked，:enabled，:focus，:first，:first-child，:visited等。

总结

本文介绍了伪元素与伪类的区别，它们是两个不同的但又看似相近的感念，在用法上是不同的，了解清楚之后，在使用中才不会混淆。

使用伪元素的好处多多，你可以用它来巧妙地创建一些自定义元素和小图标，如：

• 使用CSS创建自定义单选框radio
• 纯CSS创建自定义复选框Checkbox
• 纯CSS伪元素创建的84个小图标
• 漂亮的伪元素CSS按钮5个实例代码

标签: 伪元素  伪类