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

Question

出于某种原因，我的CSS中的::selection声明根本不起作用，它总是按照默认方式运行（在Chrome，Mac上具有淡蓝色背景）。

该代码在jsbin中可以正常工作。

::selection {
  background: red;
}

因此，我的假设是在项目中某个地方被覆盖了，但我找不到样式表中其他声明 ::selection 的地方。我想知道是否有任何方法可以在开发者工具中查看此内容，以尝试确定或调试为什么它在我的项目中无法正常工作？

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

编辑

好的，我尝试通过添加以下内容进行调试：

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

将 ::selection 和 ::-moz-selection 放在同一个语句中定义其值是不可行的，因为这两个声明不能结合到文档底部。这一点被 Chris Coyier 在 this comment 中提到。当浏览器无法理解选择器的任何部分时，它会忽略整个选择器（即使它们用逗号分隔）。当然也有例外，但大多数情况下只发生在旧版浏览器（如 IE 7）。所以现在一切都正常工作了，但问题仍然存在，是否有一种方式可以在开发者工具中查看此声明？编辑2：当声明独占一行时，它将出现在检查器中。编辑3：

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

我很惊讶Chrome没有在检查器中显示畸形声明，而是完全隐藏它。

- waffl

---

有趣的是，我很惊讶Chrome现在忽略了那个规则。它以前不会这样做。至少，Safari以前没有这样做，我不知道现在是否仍然如此。 - BoltClock

Answer 1

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

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

- Vinaya

---

好的，所以我看不到 ::selection 伪元素的原因与我的编辑有关 - 因为我在厂商前缀旁边，所以它没有在检查器中显示出来。 - waffl

现在你能在你的CSS中看到:selection了吗？ :) - Vinaya

是的，通过分离供应商特定的前缀，它可以工作。 - waffl