为什么 Firefox 在按预期方式选择文本时不更改颜色和背景颜色？它适用于 Chrome

Question

main section {
  cursor: default;
  background-color: #479097;
  border: 1px solid #000;
  padding: 2px;
  margin: 15px 5px 15px 5px;
  font-size: 20px;
  text-shadow: 1px -1px 0 #000;
}

main section::selection {
  color: inherit;
  background-color: #499299;
  cursor: text;
}

main section::-moz-selection {
  color: inherit;
  background-color: #499299;
  cursor: text;
}

<main>
  Contents:
  <section id="1">
    <span class="sectionNum">1</span> If you clicked on 1 then you came here. Lorem ipsum dolor sit amet doloremque.
  </section>
  <section id="2">
    <span class="sectionNum">2</span> If you clicked on 2 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, anim id est laborum.
  </section>
  <section id="3">
    <span class="sectionNum">3</span> If you clicked on 3 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing est laborum.
  </section>
</main>

Answer 1

好消息是它在技术上是可行的。如果你看非常近，其实是可以看到的，只是太微弱了，几乎察觉不到。

Firefox 似乎没有像在 Chrome 中那样渲染选择背景，并且 ::-moz-selection 背景颜色与背景颜色如此相似看起来有问题部分。

解决方案：对 ::-moz-selection 应用不同于一般 ::selection:

的颜色

main section::selection {
  color: inherit;
  background-color: #499299; /* Original color for Chrome */
  cursor: text;
}

main section::-moz-selection {
  color: inherit;
  background-color: #297279; /* Adjusted color for Firefox */
  cursor: text;
}

这是完整的工作代码：

main section {
  cursor: default;
  background-color: #479097;
  border: 1px solid #000;
  padding: 2px;
  margin: 15px 5px 15px 5px;
  font-size: 20px;
  text-shadow: 1px -1px 0 #000;
}

main section::selection {
  color: inherit;
  background-color: #499299;
  cursor: text;
}

main section::-moz-selection {
  color: inherit;
  background-color: #297279;
  cursor: text;
}

<main>
  Contents:
  <section id="1">
    <span class="sectionNum">1</span> If you clicked on 1 then you came here. Lorem ipsum dolor sit amet doloremque.
  </section>
  <section id="2">
    <span class="sectionNum">2</span> If you clicked on 2 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, anim id est laborum.
  </section>
  <section id="3">
    <span class="sectionNum">3</span> If you clicked on 3 then you came here. Lorem ipsum dolor sit amet, consectetur adipisicing est laborum.
  </section>
</main>

为什么 Firefox 在按预期方式选择文本时不更改颜色和背景颜色？它适用于 Chrome

Why Firefox is not changing the color and background color when the text is selected like it it supposed to? It works well on Chrome

css

mozilla

selection