CSS ::selection在谷歌浏览器中无法正常工作

Question

我有一段代码，在Internet Explorer和Mozilla Firefox中运行正常，但在Google Chrome中失败了。这是基本的CSS :: selection选择器。 以下是问题的说明：

期望结果：（IE，Firefox） 有什么问题：（Chrome） 只有在Google Chrome中才会出现这种情况，我在此附上我尝试过的代码。

::-moz-selection {
  background-color: orange;
  color: white;
}
::selection  {
  background-color: orange;
  color: white;
}
::-webkit-selection {
  background-color: orange;
  color: white;
}

<ol>
  <li>Hello World!</li>
  <li>What's up?</li>
</ol>

- odedta

Answer 1

::-webkit-selection 似乎不能解决这个问题，但有另一个解决方法：

::-moz-selection {
  background-color: orange;
  color: white;
}
::selection {
  background-color: orange;
  color: white;
}
ol {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
ol span {
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
}

<ol>
  <li><span>Hello World!</span></li>
  <li><span>What's up?</span></li>
</ol>

- Muhammet

Answer 2

您应该添加 ::-webkit-selection。

- Sreelal P Mohan

---

@odedta 请尝试使用 #FFA500 而不是 orange。 - Sreelal P Mohan

Answer 3

仍然无法工作，但这个方法对我有效...

    * {
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text; 
    }

- Josh

Answer 4

对我来说，似乎::-moz-selection是问题所在。

在将其移除后，选择内容在Chrome中显示如我所愿。

- Fredrik Johansson

Answer 5

如果仍然遇到此问题，请检查是否有任何未指定的:first-letter。

- DONTEATTHEPIE