伪元素选择器
我们先来随机生成一段英文把，怎么随机捏，乱点？这好像并没有意义，在vscode里面有一个特殊的命令lorem，我们输入之后发现生成了一段英文，（好长啊，能不能短一点？）
我们可以在lorem后面加上数字，来规定随机生成语句的长度，这里生成一个五个单词的语句吧。
这里，我想把第一个字母变红再变大一点，我们能实现吗？好像类选择器，元素选择器复合选择器都没办法实现，这里我们就要用到伪元素选择器了。
<style>
div::first-letter
{
color: red;
font-size: 40px;
}
</style>当然第一个是汉字也可以哦。
注意：这里整个一行div才是一个元素，这里的L并不是元素，但是我们却能像元素一样，去选择并且给他加样式，这里我们回顾一下学过的选择器，好像最后选中的都是元素。
你品，你细品！
但是这里选中的不是元素，我们就叫他伪元素吧
我们来给他下个定义吧。
伪元素是很想元素，但是不是元素，是元素中的一些特殊位置。
我们再来看一个伪元素
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit nostrum minus quisquam doloremque vero a exercitationem asperiores nam officiis at repellat itaque provident libero fuga accusamus deleniti fugit ea aspernatur, deserunt quis? Fugiat, quo dolor? Veritatis doloribus exercitationem nobis blanditiis rem obcaecati, assumenda molestias voluptatem soluta voluptates libero earum dicta ducimus perspiciatis! Eaque tempora eveniet vitae consequatur neque natus quasi.</div>
</body>这是一段60单词的随机语句，下面我想让第一行文字（显示的第一行，随页面宽度的变化而变化）有一个黄色的背景，
<style>
div::first-line
{
background-color: yellow;
}
</style>
目标达成，好像很有英语语法的味道啊。
下面我想让送鼠标选中的文字，背景变成绿色，文字变成橙色
div::selection
{
background-color: green;
color: orange;
}
哦呦还怪好看的嘞
下面我们来写个输入框，提示文字是请输入您的用户名，这里提示文字要用的属性是placeholder
<body>
<input type="text" placeholder="请输入您的用户名">
</body>下面我想让这个提示文字变成天蓝色我该怎么办捏，当然我们要用伪元素了，我们来看看用哪个伪元素
<style>
input::placeholder{
color: skyblue;
}
</style>
欸，如果我们这里没有::placeholder那么是什么效果捏？
答案是：把输入的文字变蓝喽。
说完了这个，我们就再来看一个需求，我要记录一些加个
<body>
<p>199.00</p>
<p>299.00</p>
<p>399.00</p>
<p>499.00</p>
<p>599.00</p>
</body>我输入完我发现，忘了输入金钱的单位了，一个个输入还是太麻烦了，有没有简单的方法，有的有的兄弟，伪元素选择器就是一个很好的方式。
<style>
/* 选中p元素最开始的位置，创建一个子元素 */
p::before{
content: "￥";
}
</style>这样我们就实现了每个加个数字签名加上了单位。
一步到位捏，但是我们发现好像不能选中单位啊。同理啊，我们要在后面加一些东西我们可以把before换成after。
选择器的优先级
话不多说咱们直接上结论
简单选择器结论
通过不同选择器，选择相同的元素，并且为相同的样式名设置不同的值的时候，就发生了样式的冲突，到底用哪个样式，就需要看优先级了
简单来说：行内样式>ID选择器>类选择器>元素选择器>通配选择器。
复杂选择器结论
比较权重，那么我们怎么看这个权重呢，在vscode上面我们只要吧鼠标放到选择器上就能看到了，但我们还要学会去求权重哦。
权重的格式是：(a,b,c)
a:表示ID选择器的个数
b:类，伪类，属性选择器的个数
c:元素，伪元素选择器的个数
这里不考虑复合选择器哦。
我们来看个例子
<head>
<meta charset="UTF-8">
<title>语言伪类</title>
<style>
.container span.slogan {
color: red;
}
div>p>span:nth-child(){
color: green;
}
</style>
</head>
<body>
<div class="container">
<p>
<span class="slogan">欢迎来到ttdr的菜鸟空间</span>
<span>欢迎您</span>
</p>
</div>
</body>我们来计算一下两个选择器的权重吧，第一个是（0，2，1），第二个是（0，1，3），那么我们该怎么比较捏，规则就是一位一位比较，只要判断出来，后面就不比较了。
欸，如果权重一样该怎么办捏，那么就后来者居上喽。
注意：行内样式还是比复杂选择器优先级高的哦。
但是行内样式是无敌的 吗，当然不是，有个单词比他还厉害
<style>
.container span.slogan {
color: red;
}
div>p>span:nth-child(){
color: red;
}
.slogan{
color: blueviolet !important;
}
</style>那就是important只要加了它，即使是加了行内样式也显示的是important的样式
注意：important不是加在某个选择器后面的，是加在元素值后面的哦，就只是这个元素值是最厉害的哦，不是整个选择器。
懂了！