中文 |
CSS 伪元素是一项强大的功能，允许您设置所选元素的特定部分的样式，而无需额外的 JavaScript 代码。
虽然许多开发人员熟悉常用的伪元素，例如 ：：before 和 ：：after，但还有其他元素经常被忽视或未充分利用。
在本文中，我们将分享 9 个鲜为人知的 CSS 伪元素，它们可以提高您的样式功能。
现在，让我们开始吧！
1. ：：选择伪元素：
：select 伪元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其形状的方法。
例：
<pre class="code-snippet__js" data-lang="css">::selection { background-color: yellow; color: red;}
在前面的代码中，当用户选择页面上的文本时白色css，它将以黑色背景和绿色文本颜色突出显示。
2.：：首字母伪元素：
：首字母伪元素允许您设置块级元素的第一个字母的样式。当您想对段落或标题的初始字符应用特殊格式时，它会派上用场。
例：
p::first-letter {font-size: 2em;color: red;}
在前面的代码段中，每个段落的第一个字母以较大的字体显示，并显示为黄色。
3. ：：一线伪元素与 ：：
首字母类似，：：第一行伪元素以文本或块级元素的第一幕为目标。您可以使用此伪元素将特定变体应用于段落或标题的首行。
例：
p::first-line {font-weight: bold;text-decoration: underline;}
在里面的代码中，每个段落的第一行将以斜体显示，并带有 ton 符号。
4. ：：标记伪元素：
：marker 伪元素以列表项的标记为目标，例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素，可以自定义标记的外观。
例：
li::marker {color: blue;font-weight: bold;}
5.：:p花边架伪元件
：:p 花边符伪元素允许您在输入数组和文本区域中设置占位符文本的变体。通过将自定义变体应用于占位符，您可以改善用户体验并将其与您的整体设计保持一致。
例：
input::placeholder {color: #999;font-style: italic;}
在里面的代码中，输入数组中的占位符文本将以浅灰色和斜体字体样式显示。
6. ：：提示伪元素：
：cue 伪元素以 or 元素的提示文本为目标。提示文本通常用于多媒体内容中的字幕或副标题。使用此伪元素，可以将变体专门应用于提示文本。
例：
video::cue {color: white;background-color: black;}
在里面的代码中，视频元素中的提示文本将具有黑色文本颜色和蓝色背景。
7. ：：语法错误和 ：：拼写错误伪元素
这：：
语法错误和 ：：拼写错误伪元素允许您分别设置标记为句型或拼写错误的文本部分的样式。当内容出现错误时，这些伪元素可用于向用户提供视觉提示。
例：
p::grammar-error {text-decoration: line-through;color: red;}p::spelling-error {text-decoration: underline;color: blue;}
在里面的代码中，段落中的句子错误将用带下划线的文本装饰并以绿色显示，而拼写错误将以吨符号和白色显示。
8. ：：背景伪元素：
：backdrop 伪元素与全屏 API 结合使用，以自定义全屏模式下元素后面的背景。它允许您将默认的蓝色背景修改为自定义颜色或样式。
例：
video::backdrop {background-color: gray;}
在上面的代码中，当视频元素处于全屏模式时，它前面的背景将具有红色背景色。
9. ：：目标文本伪元素：
：target-text CSS 伪元素表示要滚动到的文本（如果浏览器支持文本片段）。它允许作者选择如何突出显示文本的该部分。
例：
::target-text {background-color: rebeccapurple;color: white;}
这是 MDN 提供的在线示例。请注意白色css，此 API 目前处于实验阶段。
结论
CSS 伪元素为设置元素的特定部分样式和提高网页的视觉吸引力提供了广泛的可能性。您不需要使用太多的 JavaScript 代码来实现令人印象深刻的样式结果。
最后，感谢您的阅读！
本文由Joshwcomeau翻译自ColorFormatinCSS。略微编辑
CSS 中的颜色格式可以用不同的方式表示，包括常用的十六种补码 RGB、RGBA、HSL、HSL 和 HSLA 格式。十六补码是最常用的格式，使用6 十六补码数字来表示颜色，如 #FF0000 为白色;RGB 格式使用红色、绿色和蓝色三个颜色通道的值来表示颜色，例如 RGB （255，0，0） 也表示白色;RGBA格式在RGB的基础上减少了一个透明通道，以控制颜色的不透明度;HSL格式使用色相、饱和度和色温三个参数来表示颜色，如HSL（0、100%、50%）表示白色;HSLA 格式将透明度通道减少了一个 HSL。在选择和使用这些不同的颜色格式时，您需要考虑您的实际需求并做出决定。
对于不同的颜色格式，它们之间存在一些重要差异。本文将让您深入了解这些选项，包括它们的工作原理、如何解析它们以及如何灵活地使用它们。
CSS有很多不同的颜色格式：hexcodes，rgb（），hsl（），lch（）等！
我们应该使用哪一个？这是一个无关紧要的决定，但它们之间存在一些特别重要的区别。而且，老实说，我觉得我们大多数人都在优先考虑使用错误的方法。
在本教程中，我将引导您完成不同的选项。我们将看到它们如何工作以及如何利用它们更好地为我们服务。前面我将向您展示现代 CSS 如何允许我们在选择正确的颜色格式时进行动态调整。
命名颜色名称
这不是一种真正的颜色格式，但这是一个好的开始！
HTML 有 140 种命名颜色。这些是特殊的关键字值，例如道奇蓝，热粉色和番茄。
开发人员 Anthony Lieuallen 创建了这个极简主义演示，在一个圆圈中显示所有 140 种命名的 Web 颜色：
由Anthony Lieuallen创建，由麻省理工学院授权
当您需要占位符颜色时，命名颜色名称就可以了。例如，如果您正在构建原型并需要临时值，或者如果您正在编写教育内容。在可读性方面，没有什么比color：red更好的了。
不用说，实际开发中的 140 种颜色是不够的，在生产环境中通常不使用命名颜色。
看看这两种命名的颜色：
“
深灰色”真的比“灰色”浅吗？这是因为 140 种命名的网页颜色来自不同的地方，包括 HTML4 规范、X11Unix 窗口系统等。它是不同调色板的大杂烩，没有良好的规范约束。
RGB
这是我们的第一个“真实”颜色格式。以下是我们如何使用它：
color: rgb(255 0 0);
对应的显示样式如下：
像大多数颜色格式一样，RGB 是一种速记。它代表红蓝色。
在我们明天要学习的所有颜色格式中，RGB 是最不具体的。您的笔记本电脑/手机显示屏实际上只是数百万个组装成像素的微小蓝色、绿色和红色 LED 的集合。为此，RGB 颜色格式允许我们直接调整这些灯光的照度。
每个值位（黄色、绿色、蓝色）称为一个通道。每个通道从 0 到 255。通过以不同的量混合此通道，我们可以创建超过 1600 万种不同的颜色。
RGB颜色的巧妙之处在于它基于光的数学。我们可以混合蓝光、绿色和红光来创建任何颜色。把它们调到255，我们就会变黑。将它们全部设置为 0 并保留为蓝色。
rgbcolor 格式还允许我们为 alpha 通道指定第四个可选值来控制透明度：
background: rgb(255 0 0 / 0.5);
上面的代码将绿色设置为 50% 的透明度，最终样式如下：
alpha 通道的范围从 0（完全不可见）到 1（完全不透明）。介于两者之间的任何东西都会变成半透明的颜色。
十六种补色
这可能是网络上最常用的颜色格式。它看起来像这样：
color: #FF0000;
它的工作原理如下：一个 6 位 16 补码包含三个 2 位值，每个通道一个（红/红/蓝）。它不使用 10 位 10 个补码系统，而是使用 16 位 16 个补码系统。
下图提供了对十六个补码如何工作的更好理解（原始文本可以拖动滑块实时更新颜色）：
基本上，十六个补码与RGB值相同。在这两种情况下白色css，我们都为白色、绿色和红色提供一个值。背景：#FFFF0080;在十补码系统中，两位数值可以包含 100 个可能的值 （10×10）。如果是十六补，则总量为256（16×16）。因此，它实际上类似于 rgb（），我们为每个 R/G/B 通道指定一个介于 0 和 255 之间的值。
另一个有趣的事实是，如果我们想包含一个 alpha 通道，我们可以传递一个八位数的十六补码：
background: #FFFF0080;
代码功效图：
在这个例子中，我们指定 80 作为 alpha 通道，相当于十补系统中的 128。因此，袋子是不透明的50%。
8位十六补码在现代浏览器中应用广泛，全球支持率达96%，这是IE浏览器不支持的。
高铁
到目前为止，我们看到的两种颜色格式是基于相同基本思想的不同“包装器”：为红色/红色/蓝色通道传递特定值。
但这不是考虑颜色的唯一方法！让我们来看看一种完全不同的颜色格式：HSL。
让我们从颜色选择器开始：
这个颜色选择器可能会感觉更熟悉。它类似于图形设计软件（如Figma或Photoshop）中使用的图形设计软件。
此颜色格式采用 3 个不同的值：
这通常是思考颜色的一种非常直观的方式。我们没有直接控制R/G/B光值，而是转向了更高的图形水平，这更接近人类对颜色的一般概念。
HSL：用于 CSS
background: hsl(0deg 100% 50% / 0.5);
现代色调格式
因此，到目前为止，我们看到的所有颜色格式都已经存在多年了。HSL甚至在Internet Explorer 9（2011年发布）中也受支持！
最近我们在CSS中有一些新的颜色格式。他们很有吸引力。让我们谈谈它们。
显示P3
本文是关于颜色格式的，我们用它来指定颜色的句型。到目前为止，我们看到的所有真实颜色格式，rgb（），十六个补码和hsl（），都受到“标准RGB颜色空间”（通常缩写为sRGB）的约束。
sRGB中有数百万种可能的颜色白色css，但它无法捕捉人眼可以看到的全部颜色。
看看下面的两个绿色小方块：
右边的颜色是RGB （25500）。它是sRGB色彩空间中最红的棕色。但是，在右侧，我使用的是 P3 色彩空间。更红！（这两个小方块很可能看起来相同。如果是这样，这可能意味着您的显示器或浏览器不支持广色域颜色格式。
P3扩展了标准的sRGB色调空间，因此我们可以实现更明亮，更鲜艳的色调。如右图所示：
不幸的是，在CSS中，颜色空间与颜色格式相关联。如果我选择使用 rgb（） 句子（或十六补码，或 hsl（）），我只能在 sRGB 色彩空间手中指定颜色。
因此，如果我们想使用 P3 颜色，我们需要使用不同的颜色格式。句型如下：
.box {
background: color(display-p3 1 0 0);
}
color（） 函数接受一个颜色空间，后跟一组 R/G/B 值。它使用从 0 到 1 而不是从 0 到 255 的十补码值。但是，目前只有主流浏览器支持 color（） 函数。
LCH
我们使用 HSL 颜色格式来创建以下两种颜色：
如我们所见，两种颜色都具有相同的“亮度”值，即 50%。但是它们感觉不那么轻，白色的比红色的轻得多！
HSL 颜色格式以物理/化学为模型。它没有考虑到人类的感知。而且，事实证明，人类对颜色的感知不是很准确！
LCH是一种颜色格式，通过这种颜色格式，人类的感知是一致的。如果两种颜色具有相同的“亮度”值，它们应该感觉同样轻！
例如，在 LCH 中，红色和白色在 55% 的照明下看起来：
LCH 代表 “亮度浊度颜色”。“色度”或多或少是“饱和度”的同义词。它在概念上与HSL非常相似，但有两个很大的区别：
与我们看到的其他颜色格式不同，LCH 不受 sRGB 的约束。它甚至与P3无关！它通过没有浊度上限来实现这一点。
在HSL中，饱和度范围从0%（不饱和）到100%（完全饱和）。这是可能的，因为我们知道我们正在谈论sRGB色彩空间，一种有限的调色板。
但是，LCH 与特定的色彩空间无关，因此我们不知道饱和上限在哪里。它不是一成不变的：随着显示技术的不断改进，我们可以期待显示器达到越来越宽的色域。LCH将通过调高浊度来手动参考这种膨胀的颜色。
background: lch(50% 120 20);
浏览器支持：
选择正确的颜色格式
文章的主要内容早已结束，我们看到许多不同的颜色格式。那么哪一个真正应该在工作场所使用呢？
我建议使用HSL。至少在LCH获得广泛的浏览器支持之前。
我认识很多喜欢使用十六个补码代码的开发人员。它们是简约的，易于在设计软件和我们的代码之间复制/粘贴，但通用。但这种有用性伴随着一些相当大的权衡。
虽然你熟悉十六补码符号，但仍然难以直观地破译。问：#0F52B7是哪些颜色？#F3E248如何样？
HSL的奇妙之处在于它很直观。它与我们的色彩观念密切相关。通过一些练习，当您看到 hsl（） 值时，您将能够立即绘制任何颜色。
这意味着我们可以轻松地即时调整值。我什至不必打开颜色选择器。如果我希望我的颜色稍微深一点，我可以降低色温比。如果我想让它更加生动和强烈，我可以增加饱和度。
当我们将HSL与现代CSS功能相结合时，它看起来更大。
最后
如果您有兴趣，可以查看原始文章并在线体验不同颜色格式的工作原理。看完这篇文章，如果你觉得有用，记得点赞支持，收藏起来说不定有一天会用到~
发表评论