🤯您从未听说过的 CSS 伪元素/类！

我刚刚翻阅了 MDN 的 CSS 参考，想为这个CSS Quickies系列找点新东西。
于是，我边读边翻，发现了一个有趣的伪类，然后又发现了一个又一个。
就这样，我们开始了！我来写一篇关于伪元素和伪类的文章。

伪元素与伪类

人们经常使用这些，因为它们是相同的，是的，CSS2/CSS3 也应受到指责，因为我们同时拥有::before和:before。

那么伪元素是什么？

CSS 伪元素用于设置元素指定部分的样式。
例如：

• 设置元素首字母或首行的样式
• 在元素内容之前或之后插入内容

最为人熟知的元素是::before和::after。

那么伪类是什么？

伪类用于定义元素的特殊状态。
例如：

• 当用户鼠标悬停在元素上时设置元素的样式
• 对访问过的和未访问过的链接设置不同的样式
• 当元素获得焦点时为其设置样式最为人熟知的类有:hover、等等:active。:focus

免责声明：其中大多数尚未或永远不会受到 Internet Explorer 的支持，并且可能尚未受到所有现代浏览器的支持。

::backdrop 伪元素

这是其中的一部分Fullscreen API，如果你想要有艺术感的话，它会给你带来一些积分。

当您在浏览器中进入全屏模式时，大多数浏览器会显示黑色背景，如果视频顶部和底部有横条，则背景也会是黑色。使用::backdrop伪元素，您可以将黑色背景更改为您喜欢的任何颜色！

您可以将此伪元素与 HTML 标签一起使用video。dialog以下是如何将边框设为粉色的示例！

video::backdrop {
    background-color: pink;
}

很神奇吧？

::grammar-error 和 ::spelling-error 伪元素

嘿嘿，这些都是给我的！因为总有人抱怨我的拼写和语法！很快你们就能拥有你们的伪元素了！这样你们就可以在下面写长篇大论，解释为什么你们看不懂那篇文章，以及为什么它如此有害！如果你收到过类似的评论，或者写过类似的评论，请在下面留言！我爱你们俩😊

好的，回到正题😋

::grammar-error 伪元素表示用户代理标记为语法不正确的文本段。

现在，当您出现拼写或语法错误时，您在浏览器中看到的是一条红色下划线，但有了这个伪元素，您现在可以改变外观！

例子：

body::grammar-error {
  color: green;
}

我无法向您展示真实的例子，因为还没有浏览器实现这一点，而且它是 CSS 伪元素 4 级规范的一部分。

尽管如此，我们都在等待这个功能！

:lang() 伪类

:lang() 伪类根据元素所确定的语言来匹配元素。

您需要传递语言代码。它可以是两个字符，例如de、lt等等it，也可以fr-ca是加拿大法语。

示例：
HTML

<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

这将产生以下输出：

令人惊讶的是，所有主流浏览器都支持此功能，甚至 IE 和 Safari！

:placeholder-shown 伪类

:placeholder-shown CSS 伪类代表当前显示占位符文本的任何或元素。

:placeholder-shown但是和之间有什么区别呢::placeholder？好问题！

:placeholder-shown 用于在显示占位符文本时选中输入框本身。与用于设置占位符文本样式的 ::placeholder 相反。由此我们可以看出，理解伪类和伪元素之间的区别至关重要！

示例：
HTML

<input placeholder="This is a very very very very long placeholder">

CSS

input:placeholder-shown {
  border: 5px solid red;
}

结果：

:any-link 伪类

:any-link CSS 伪类选择器匹配所有具有属性的 、 或 元素<a>。<area>因此，它匹配所有符合 :link 或 :visited 的元素。<link>href

我希望我之前就知道这个！它使样式链接变得容易得多！

以下是一个例子：

:any-link {
  text-decoration: none;
  color: green;
  font-weight: 600;
}

这将使每个具有有效href粗体和绿色的属性！

当然，除了 IE 之外，每个浏览器都支持此功能。谢谢，IE 什么也没做！

今天就到这里！
你还知道哪些有趣的伪元素或伪类呢？

这些你知道多少？

您会使用其中的一些吗？

在下面发表评论！

希望你喜欢这篇文章！如果你想跟进，请评论、点赞和分享。这样我就能知道你对这类内容感兴趣！

👋打个招呼！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube