携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
伪类是什么
伪类是能够指定元素的特殊状态，会根据用户的行为而改变元素的状态。
伪元素又是什么
伪元素是在现有元素上添加某部分内容或者样式。
:not()
:not()用来匹配不符合一组选择器的元素。 如果希望某个样式不作用到选择器上，可以使用:not(选择器）或者减少重复性的代码，这个可能在css预处理器里面用来要爽一点。
//style
<style>
p:not(.bg_not){
background-color: aqua;
}
</style>
<body>
<p class="bg_not">这是使用not的</p>
<p class="bg_not">这是使用not的</p>
<p class="bg_not">这是使用not的</p>
<p>这是不使用not的</p>
</body>
结果如下：
:is()
:is()伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。
<style>
:is(div,article,nav) p:hover{
color: aqua;
}
/*
改伪类可以帮助我们简化代码；
上述写法和下面的代码完全等价：
div p:hover,
article p:hover,
nav p:hover{
color: aqua;
}
*/
</style>
<body>
<div>
<p>hover一下改变颜色</p>
</div>
<article>
<p>hover一下改变颜色</p>
</article>
<nav>
<p>hover一下改变颜色</p>
</nav>
</body>
:where()
和:is功能性差不多，但是它不会增加整体选择器的特殊性，总是为0
:where(div,article,nav) p:hover{
color: aqua;
}
/* 和下面代码等价 */
div p:hover,
article p:hover,
nav p:hover{
color: aqua;
}
<div>
<p>hover一下改变颜色</p>
</div>
<article>
<p>hover一下改变颜色</p>
</article>
<nav>
<p>hover一下改变颜色</p>
</nav>
::first-letter
会选择某个块级元素的第一行的第一个字母（文字）为其添加样式
p::first-letter{
font-size: 30px;
color: red;
}
<div>
<p> 蜀道难，难于上青天 </p>
</div>
可以替代span等标签将第一个字母包裹起来的情况，如：
span{
font-size: 30px;
color: red;
}
<div>
<p> <span> 蜀</span>道难，难于上青天 </p>
</div>
::first-line
这个是将块级元素的第一行添加样式，受其元素宽度，文档宽度和文本的文字大小等因素制约
p{
width: 300px;
}
p::first-line{
font-size: 30px;
color: red;
}
<div>
<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。 </p>
</div>
在p标签宽度在300px下展示的结果：
在p标签宽度在500px下展示的结果：
::selection
将被用户高亮的内容添加样式
width: 500px;
}
p::selection{
color: red;
background-color: aquamarine;
}
<div>
<p>噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。 </p>
</div>
