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

尝试通过inspect元素检查。

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