为什么选择文本时，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>