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

Question

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

\n\n

该代码在jsbin中运行良好

\n\n

::selection {\n  background: red;\n}\n

\n\n

因此，我的假设是项目中的某个地方正在覆盖某些内容，但我无法::selection在样式表中的任何位置找到另一个声明。我想知道是否有任何方法可以在开发人员工具中看到这一点，以尝试查明或调试它在我的项目中不起作用的原因？

\n\n

即使给 CSS 一个!important声明也没有帮助。

\n\n

编辑

\n\n

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

\n\n

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

\n\n

到文件的页脚，因此事实证明，我们不能将这两个声明合并在一个声明中，克里斯·科耶尔在评论中提到了这一点：

\n\n

\n

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

\n\n

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

\n

\n\n

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

\n\n

编辑2

\n\n

好的，当然，当声明位于自己的行时，它就会出现在检查器中。

\n\n

编辑3

\n\n

一个非常相关的问题：为什么不能将特定于供应商的伪元素/类组合到一个规则集中？

\n\n

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

\n

Answer 1

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

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