在开发人员工具中操作::选择伪元素

Question

是否可以在Developer Tools中调整：selection伪元素的属性？

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

Answer 1

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

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



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

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

Answer 2

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

正如@Sampson所提到的，您还可以仅使用::selection或更具体的选择器添加::selection个样式，例如::selection或p::selection。但请注意，根据规范，您只能影响span::selection，color，background-color，cursor，outline，{{1 {}包含text-decoration伪元素的text-emphasis-color。

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

::selection