尚硅谷前端基础 (36)

好，那么关于伪类，我们就暂时先告一段落，那接下来我们来说下一部分跟这个伪类很像的一组选择器，我们叫做伪元素选择器。呃，伪元素选器，其实呢，就。更好理解了，伪类是不存在的类，那伪元素呢，那就是不存在的元素呗，对吧，我这直接写个P标签里边，我们直接写一个lom啊，然后在这我们直接运行一下啊。这关掉我们这个P标签里比较简单，我们就写了一个段落啊，那现在我给它整体设置一下样式啊，Style标签，我可以把这个P，我把这个放个size点，给它设稍微大一点，比如设置一个20像素啊，20像素设稍微大一点，你看得清楚一点，那这样我们这就有了一行这个文字了啊这行文字了，那这里我们就要说一个。

问题，什么叫伪元素啊，伪元素举个例子，我们去看这个报纸也好，看文章也好，我们看一个文章经常看到这样一种效果，诶，我的第一个字母开头字母它会比别的这个字母要要大一些，诶要大一些，比如说我这L可能就是我开头特别大，然后后边可能就比较的比较小，对吧，比较小这个效果我们叫做一个首字母的一个下沉啊，首字母比这大叫做一个首字母的一个下沉，那也就是意味着我要给我的第一个字母要单独的设置一个样式，哎，给我的第一个字母单独的设置一个样式，那这里就产生了一个问题，那我怎么去单独给这个L来设置样式，哎，有同学说简单，你直接给L加一个标签SPASPA，然后干嘛呢？把这L放到这个死SPA里，你要做的事只是干嘛呢？单独给这个死SPA设计样式，比如说。

Find size来个50像素，然后一保存是不是就达到这么一个效果呀？哎，首字母下沉效果很简单，达到了，好，那这个叫什么？哎，那这里等于我给L单独加了一个标签，诶效果的确能达到，也还挺好看，对吧，的确能实现，但是他有什么问题啊。有什么问题，诶还是产生了一个很大的问题，也就是说我这文字我不能换了，而且我每一次写新的内容，我都需要单独的去给首字母去加一个这个标签，那这个时候操作起来是不是就就很麻烦呀，诶很麻烦，所以在这里边我们现在有没有用到伪元素，没有味道，伪元素我们用的是一个实打实的是一个死败，是不是一个真正的元素，哎，真正元素，所以这个时候我们来说一下，把这SP给它去掉，那这里边我们就要说到我们的这个伪元素。

伪元素，伪元素是什么呢？哎，伪元素它干嘛呢？哎，它表示我们这个，哎液面中什么呢？哎液面中一些。诶特殊的，诶并不真实存在的元素啊，并不真实存在元素，所以它和尾类很像，尾类可能表示的是一个特殊的状态，伪元素表示的是一些特殊的位置啊，它表示特殊位置，比如说像这儿首字母对吧？像首字母比如说我想选中我的第一行对吧？那这些都属于特殊的一个位置，那这些位置怎么表示，我们用的就是一个伪元素，伪元素我们什么呢？伪元素使用我们这个冒号，冒号开头，当然有一些老版本的，你也可以用单冒号，但是我们官方标准就是双冒号，所以伪元素我们拿我们刚才举例的，我们有第一个叫做一个first letter first letter first叫第一个letter叫做字母，所以first letter表示什么呢？哎，表示第一个字母，所以我可以怎么写呢？

我直接来一个P，然后冒号，冒号force的letter，那这表示什么意思？表示选中P里边的第一个字母谁呢？那就是L，那等于它就把L变成了一个元素，但是注意我L这可没有单独给它加标签，但是确实它会把它单独变成元素，那这里边我们就可以直接来一个方size，比如说我来一个50像素，这样效果你看是不是L就变大了，哎，L就变大了，并且它的好处是你第一个字母无论是谁。它都会变大啊，第一个字母，无论是谁它都会变大，因为它叫做一个force的letter总是选择第一个字母叫做伪元素，你就想，你就这么想象吧，他在我们的第一个字母。

多维加了一个什么呀，死SPA，然后你再修改这个死SPA的样式啊，你可以这么想象，但是这个死SPA并不存在，它是假的，所以叫伪元素啊，伪元素叫做first letter，还有什么呢？还有我们叫做一个冒号，冒号叫做一个first LA啊first LA。For斯叫什么呢？叫表示。第一行，第一行同样它也是一个，哎，伪元素嘛，因为你第一行现在它是第一行，那当我这宽度改了以后，是不是第一行就短了，哎，所以第一行也是会发生发生变化的啊，发生变化的，所以在这儿我还可以直接来一个P冒号，冒号我们来一个four LA表示第一行，然后在这儿我们可以设置一个什么呢？设一个background color background color color是颜色，Background叫背景，所以background color叫背景颜色，我直接给它设一个yellow，把背景颜色设置一个黄色，这时候你来看第一行是不是就有一个背景颜色是黄色了，哎，就说这个东西，你看当我第一行变短的时候，这些是不是就没有背景颜色了？哎，因为它选中的是第一行，也是我们所谓的叫特殊的一个元素啊，你就想象着它把第一行所有的元，所有的文字放到一个假的元素里啊，放到一个伪元素里，然后给这个元素设置样式，就达到这么一个效果，然后第一行变成一个红色啊，叫做first。

LA啊for LA，嗯，还有一些可能用的没有那么多的，我们叫做什么呢？叫做一个selection啊selection，哎注意双冒号啊，Selection表示什么呢？哎，表示我们这个选中的这个内容啊，选中的内容，所以这个时候我们直接测试一下啊，这不多说了，元素比较好理解，直接冒号，冒号一个selection selection呢，我们这来一个background color background color，我们来一个green yellow，这时候一保存现在啊，你看没有任何效果，没有任何效果，Select是什么意思？选择什么叫选择，我通过鼠标我是不是可以拖拽这个选中这个文字啊，所以这时候你看啊，等我选中文字。

看到了吗？哎，是不是变成一个绿色呀？哎，Selection表示给这个选中内容去设置样式，同样这你你用标签根本就没法做，因为你不知道他会选哪个，所以他就等于把什么呢？把这个选中的内容放到一个不存在的标签里，一个假的标签里，然后我们就是在给这个假的标签，这个伪元素来设置样式啊，所以注意，伪元素就是假想出一个并不存在的元素啊，并不存在元素这么一个动作，好，然后再来说一下，我在这写一个div div写一个hello hello how are you，随便写一个东西啊，随便写一个东西，那这就是我们div div我要说什么呢？哎，Div里边其实不光是div啊，所有的，那就是说它会有一个特殊位置，什么特殊位置呢？哎，Hello，前面这个位置U呢，后边这个位置，也就是说我们本来说我们这个H啊，我看这我这个H是不是已经是我。

和第一个字母了，哎，但是它跟它之间这有一个位置，U跟这儿有一个位置，也就是说诶，比我第一个字母还靠前的一个位置，比我最后一个字母还靠后的这个位置，那这个位置我们怎么表示啊，我们这有两个，一个叫做冒号，冒号哎比。Before啊，还有一个叫做冒号，我们叫做一个after啊after这个before表示元素的起始，开始位置，哎，After表示什么呢？元素的一个最后的一个位置，哎，结束位置了，哎，最后最后啊，这个呢，Before表示元素的开始什么意思？我这写一个啊，我这写一个div冒号我们来一个，诶冒号冒号我们来一个比副，那这表什么意思，这个选中的首先是谁，它选中的不是div，是div的比for是哪呢？也就是是这个位置，也就是说这个H和div这个for啊，它选中的是这个位置，那我也就是说我可以单独给这个位置来设置样式，但是你现在写呀，你看不出任何效果来，我们直接检查一下，看一下元素，一检查点这hello在这儿，你现在看不出这何效果了，因为什么呀？因为你想一下这个位置，我们所说的这个前边位置是不是就是这个位置啊，这个位置还有没有空间了，没有空间了啊，一点空间都没有啊，一点空间都没有，所以这个时候你现在给他设置什么color啊，你比如说我来一个color red，它没有任何效果，为什么呢？因为这没有东西啊，没有东西，所以我们使用笔，Before，还有after，我们必须结合一个。

的属性使用。Before和我们这个after，哎，必须什么呢？必须结合我们这个content使用。

集集，呃，结合我们这个content con content的属性来使用，所以这个时候注意我这必须有一个content content什么意思？Content叫内容，所以我在这儿写一个content，它表示什么意思呢？表示我要在这个div的开始位置，也就是这个位置我要添加一个内容，凭空添加一个内容，这个内容注意是通过什么加的，是通过CSS加的啊，通过C加的，所以这个时候可以直接写一个，比如说我写一个ABC，我们来看效果，看这你看。我这页面是不是就凭空多出了一个ABC啊，在哪，在H的前边，注意这ABC是哪来的，这个ABC是我通过C3加的，我可以再给它设置一个color，我们直接来一个bike，呃，直接来一个color吧，Color我们来一个这个CU，我来一个red，我给它设置一个红色，你来看是不是只有它变红了，哎，那这个位置就叫笔副，在我们的元素的最开头啊，在div的最开头就叫一个笔副，你看这就给你显出来了，就在这个位置，这就是一个笔副啊，Div的最开头，注意它在div的里边，这叫做一个笔副，而且注意它所通过before呀，After所添加的内容，这玩意儿你是没有办法选中的。

看到了吗？是选不中的，因为它是通过CSS加的啊，通过C加的，同理我们还有一个叫做div，我直接来一个叫做after after我写一个，我换一个，哈哈哈哈，然后呢，颜色我们换一个blue啊，Blue这一保存现在来看，哈哈，是不是在这儿呢？同样这个东西依然没有办法选中，那after在哪呢？After我们直接点开这个div after在哪呢？After在标签的最后啊，最后无论你有多少内容，比before一定是在最开头时，After一定是在最后，这是我们说的比before还有after，哎，有同学老师，这俩玩意有啥有啥用啊，有啥用啊，哎。

暂时先不能告诉你啊，暂时先不能告诉你，你先有一个印象啊，Before表示元素的最开头，After表示元素的最结尾，这东西我们在开发的时候用的还还挺多的，还挺多的，那如果你说有什么用的话，现在可能比较典型的一个作用就是我可以这么办，那现在我们来看啊，我们之前讲过一个标签叫做Q，叫Q，我写一个hello q表示一个短引用，你看我写完这个Q以后，它会自动在前后加双引号，但是我这个内容这我并没有加，那这双引号哪来的，这双引号哪来的，你看这双引号能不能选中，选不中那所以其实这双引号就是通过before和after加上的。

懂这意思吧，这双引号就是通过笔before和al之加上的，它写的好处就是以后你再写内容，你就不用再去手动去加引号了，你直接把它放到标签里，它是不是自带引号，哎，同理我们也可以通过它来指定我们这个符号，比如说我直接来一个div冒号，我们来一个比before before，我给他指定一家啊，我直接来一个这个content，我指定一个项目方，哎，我指定什么呢？你这搜狗输入法，我找几个特殊符号啊，加加。加，哎，比如说我前边写一个B，哎，Before写一个B，是不是就出现这么一个东西，哎，那同理，我再来一个after。At呀，还是我们用那个搜狗输入法，我这直接来一个V1，诶V1加加加，我们来看我这来一个C这个东西，那这个时候你来看我这个玩意儿是不是就让这两个块给引起来了，并且它的好处是什么呀，它不管你内容多长，你内容爱多长多长，因为我笔数永远在最前面，After是不是永远在最后边，诶你内容多长多短，我这个括号都在前边和后边，不会受到影响，并且你选的时候你也选不中它，你其实你像你做一些复制的时候，就不需要考虑这个问题，对吧？所以比赋after我们在开发里边用的是非常非常多的，所以其实我们说这几个伪元素最重要就是这两个b before，还有after上面这个其实用的多没有那么的多啊，没有那么多，不是必须用的，但是b before after我们会经常去使用，先记住啊，先记住before after是什么，是我们标签的开始位置，还有起始位置那个for啊，那个for你可以。

可以通过count去给那个form去加内容，也就是说我可以直接通过CSS去向HTML里边去添加内容，好，就这么一个意思，我们这几个伪元素也就说完了，还是先去。

体会一下，你就过一下啊，我们这里先停一下。