范仁义css3课程---38、伪元素选择器
一、总结
一句话总结：
伪元素选择器中的伪元素相当于dom中不存在的元素，仅仅是css中用来渲染，添加一些特殊效果的，比如p::before，选择p标签（真元素）前面的假元素（伪元素，p标签前面没有元素，只是假设有）
1、常见的伪元素选择器有哪些？
比如:before、:after、:first-letter、:first-line
二、伪元素选择器
博客对应课程的视频位置：38、伪元素选择器
https://www.fanrenyi.com/video/10/80
1、:before
:before 选择器向选定的元素前插入内容。
使用content 属性来指定要插入的内容。
p:before
{
content:"台词";
}
2、:after
:after 选择器向选定的元素之后插入内容。
使用content 属性来指定要插入的内容。
p:after
{
content:"记住我";
}
3、:first-letter
:first-letter选择器用来指定元素第一个字母的样式
p:first-letter { font-size:200%; color:#8A2BE2; }
4、:first-line
:first-line选择器用来指定选择器第一行的样式。
p:first-line { background-color:yellow; }
三、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪元素选择器</title> 6 <style> 7 /*元素选择器*/ 8 p{ 9 color: red; 10 } 11 /*伪元素选择器*/ 12 p::before{ 13 content: 'p:before---'; 14 color: blue; 15 } 16 p::after{ 17 content: '----p::after'; 18 color: orange; 19 } 20 a:before{ 21 content: 'a:before---'; 22 color: blue; 23 } 24 /*div:first-letter{*/ 25 /* font-size: 30px;*/ 26 /* color: red;*/ 27 /*}*/ 28 div:first-line{ 29 color: yellowgreen; 30 } 31 </style> 32 </head> 33 <body> 34 <!-- 35 p::before的作用就是在 p标签的前面增加一些内容，可以给这些增加的内容设置样式 36 ::after ： 就是在元素的后面增加一些内容，然后选中这些内容设置样式 37 ::first-letter 选中第一个字符，然后选中这些内容设置样式 38 ::first-line 选中第一行，然后选中这些内容设置样式 39 40 41 也就是:before和:after中一般都要 有content属性，这个属性是给 他们设置内容的 42 43 44 伪元素选择器 用单冒号(:)和双冒号(::)都可以，推荐使用双冒号，和伪类选择器做区分 45 在css3以前，伪类和伪元素都是使用的单冒号(:)，只不过在css3的时候，w3c为了区分伪类和伪元素 46 css3中的伪类就是单冒号(:)，伪元素就是双冒号(:) 47 48 49 50 51 --> 52 53 <p>p标签</p> 54 <a href="">a标签</a> 55 <div>伪元素选择器 用单冒号(:)和双冒号(::)都可以，推荐使用双冒号，和伪类选择器做区分 56 在css3以前，伪类和伪元素都是使用的单冒号(:)，只不过在css3的时候，w3c为了区分伪类和伪元素 57 css3中的伪类就是单冒号(:)，伪元素就是双冒号(:)</div> 58 </body> 59 </html>