如何在 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:

中提到了这一点

I have a question: Why can´t you put ::selection and ::-moz-selection together and define a value for both of that? If you do that FF will ignore the values.

That’s a good CSS lesson! When a browser doesn’t understand any part of a selector, it ignores the whole selector (even if they are comma separated). There are some exceptions but mostly in old browsers (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. Select "inspect" 选项
3. 在检查元素面板中，右侧会出现样式。
4. 您会在其中找到您的 :selection 声明。