<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素选择器</title> <style> /*元素选择器*/ p{ color: red; } /*伪元素选择器*/ p::before{ content: 'p:before---'; color: blue; } p::after{ content: '----p::after'; color: orange; } a:before{ content: 'a:before---'; color: blue; } /*div:first-letter{*/ /* font-size: 30px;*/ /* color: red;*/ /*}*/ div:first-line{ color: yellowgreen; } </style> </head> <body> <!-- p::before的作用就是在 p标签的前面增加一些内容，可以给这些增加的内容设置样式 ::after ： 就是在元素的后面增加一些内容，然后选中这些内容设置样式 ::first-letter 选中第一个字符，然后选中这些内容设置样式 ::first-line 选中第一行，然后选中这些内容设置样式 也就是:before和:after中一般都要 有content属性，这个属性是给 他们设置内容的 伪元素选择器 用单冒号(:)和双冒号(::)都可以，推荐使用双冒号，和伪类选择器做区分 在css3以前，伪类和伪元素都是使用的单冒号(:)，只不过在css3的时候，w3c为了区分伪类和伪元素 css3中的伪类就是单冒号(:)，伪元素就是双冒号(:) --> <p>p标签</p> <a href="">a标签</a> <div>伪元素选择器 用单冒号(:)和双冒号(::)都可以，推荐使用双冒号，和伪类选择器做区分 在css3以前，伪类和伪元素都是使用的单冒号(:)，只不过在css3的时候，w3c为了区分伪类和伪元素 css3中的伪类就是单冒号(:)，伪元素就是双冒号(:)</div> </body> </html>