伪元素和伪类的区别和作用

精简

• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

详细

• 伪元素 – 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。
• 它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

• 伪类 – 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}