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

Question

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

我希望能够在不修改源 CSS 文件的情况下测试选择的不同背景和字体颜色，但是在检查页面时我无法在任何地方找到伪元素。

Answer 1

您可以在 Internet Explorer 和 Firefox 中通过右键单击 Styles 面板并选择 New Rule 来完成此操作。

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

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

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

Answer 2

::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;
}