在开发者工具中操作 ::selection 伪元素

Question

在开发者工具中是否可以调整 :selection 伪元素的属性？

我想测试不同的选区背景和字体颜色，而不需要修改源CSS文件，但是我在检查页面时无法找到伪元素。

- Jesse Schoff

Answer 1

::selection 伪元素在 Chrome 的开发者工具中作为最后一个样式出现在样式面板中，几乎就像是最不具体的样式一样。若要查看它，请确保在样式表中定义了它，然后选择一些文本并检查所选单词/区域之一。 正如 @Sampson 所提到的，你也可以使用 ::selection 或更具体的选择器（如 p::selection 或 span::selection）来添加 ::selection 样式。但请注意，根据规范，你只能使用 ::selection 伪元素影响 color、background-color、cursor、outline、text-decoration、text-emphasis-color 和 text-shadow。 使用 ::selection 伪元素时需要考虑的另一个因素是，你可能会通过创建缺乏对比度的选择来影响可访问性。你还可能会影响链接的可见性。在这种情况下，你可以使用对比度检查工具测试你的对比度，并为链接创建更具体的 ::selection 样式，例如：

span::selection {
    background-color: #b3d8fd;
}

a.footnote span::selection {
    color: #920000;
}

- NilsyNils

Answer 2

在Internet Explorer和Firefox中，您可以通过在样式面板内右键单击并选择新规则来完成此操作。

1. 在样式面板内右键单击
2. 从上下文菜单中选择添加新规则
3. 编写新的::selection规则并添加属性

Chrome在样式面板中有一个小图标，您可以点击它创建一个新的规则。

1. 在样式面板中点击新样式规则按钮
2. 编写新的::selection规则并添加属性

- Sampson

---

很酷！谢谢你的回答。但是，至少在Chrome中只有在样式表中没有现有的::selection规则时，这种方法才有效。 - Jesse Schoff

@Mute 你可以提高你的选择规则的特异性。将其直接应用于你想要的元素 p::selection，或者在值后面加上 !important 以进行测试。 - Sampson

没错。在这种情况下，!important会很有效。 - Jesse Schoff