如何在 Chrome 开发者工具中查看 ::selection

Question

由于某种原因，我的 CSS 中的 ::selection 声明根本不起作用，它始终按照默认值运行（Chrome、Mac 上的浅蓝色背景）。

代码在a jsbin中运行良好

::selection {
  background: red;
}

因此，我的假设是在项目的某处被覆盖，但我在样式表的任何地方都找不到::selection 的另一个声明。我想知道是否有任何方法可以在开发者工具中看到这一点，以尝试查明或调试为什么它在我的项目中不起作用？

即使给 CSS 一个 !important 声明也无济于事。

编辑

好的，我尝试通过添加进一步调试：

<style type="text/css">
::selection, ::-moz-selection {
  background: red !important;
}
</style>

到文档的页脚，因此事实证明不能将这两个声明组合在一个语句中，Chris Coyier 在this comment 中提到：

我有一个问题：为什么不能将 ::selection 和 ::-moz-selection 放在一起并为两者定义一个值？如果你这样做，FF 将忽略这些值。

这是一堂很好的 CSS 课！当浏览器不理解选择器的任何部分时，它会忽略 整个选择器（即使它们是逗号分隔的）。有一些 例外，但主要在旧浏览器（IE 7？）中。

所以一切都很好并且再次工作，但我想问题仍然存在，有没有办法以某种方式在 devtools 中看到这个声明？

编辑 2

好的，当然，当声明单独一行时，它就会出现在检查器中。

编辑 3

一个非常相关的 SO 问题：Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

我很惊讶 Chrome 不仅仍然在检查器中显示格式错误的声明，而不是完全隐藏它。

Answer 1

尝试通过检查元素进行检查。

1. 网页右键
2. 选择“检查”选项
3. 在检查元素面板中，右侧会出现样式。
4. 您会在其中找到您的 :selection 声明。