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

Question

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

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

Answer 1

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

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

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

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

Answer 2

伪元素在 Chrome的::selection开发工具中作为样式窗格中的最后一个样式可用 - 几乎就像它是最不具体的样式一样。要查看它，请确保在样式表中定义了它，然后选择一些文本并检查选定的单词/区域之一。

正如@Sampson 所提到的，您还可以仅使用或更具体的选择器来添加::selection样式，例如or 。但是请记住，根据规范，您只能使用伪元素影响, , , ,和。::selectionp::selectionspan::selectioncolorbackground-colorcursoroutlinetext-decorationtext-emphasis-colortext-shadow::selection

使用伪时的另一个考虑因素::selection是，您可能会通过创建缺乏对比度的选择来影响可访问性。您也可能会影响链接的可见性。在这种情况下，您可以使用对比度检查器工具测试您的对比度，并且您可以::selection为链接创建更具体的样式 - 例如：

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

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