范仁义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>