CSS 选择器 ::selection 没有使用给定的背景颜色
Posted
技术标签:
【中文标题】CSS 选择器 ::selection 没有使用给定的背景颜色【英文标题】：CSS selector ::selection is not using given background color 【发布时间】：2022-01-12 15:17:18 【问题描述】：我正在尝试制作一些 RGB 文本，这很有效，但是当我尝试制作 ::selection 时，它会隐藏文本，并且由于某种原因会采用文本的背景颜色。我已经尝试了我能想到的任何东西，目前，我正在为 chrome 制作它，稍后将在 firefox 上工作。
研究
在我的研究中，我发现您不需要使用像.rgb 这样的选择器。在查看一些文档/示例时，我遇到了许多奇怪的事情，例如当我使用 .rgb::selection 时，我无法突出显示/选择屏幕上的任何文本。
当我查看 W3schools 时，他们只是使用
::selection
color: red;
background: yellow;
它有效。我问过我的老师和我的同龄人。他们都不明白为什么::selection 会占用 animate 属性。我的想法是，当我使用-webkit-background-clip 时，这就是它无法正常工作的原因。如果是这种情况，那么我该怎么做才能让它仍然需要它。当我阅读更多内容时，我尝试使用!important，这是我得到的最接近的。它使文本变为白色，但背景中的颜色仍在变化。我查看了here 以尝试了解如何正确使用它，但我认为我已经正确使用了它。我似乎无法让背景颜色保持一种颜色。
这是我到目前为止所得到的。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
.rgb
position:fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation:animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
::selection !important
background: red;
color: white;
@keyframes animate
0%, 100%
filter:hue-rotate(0deg);
50%
filter:hue-rotate(360deg);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="rgb">Welcome to my webpage</h1>
</body>
</html>我在这个网站上到处寻找有这个问题的人或人，但似乎我是第一个。
【问题讨论】：
仔细看看你的 CSS 和你的 HTML。例如， div .rgb 不存在 - 没有类 rgb 的元素是 div 的子元素。您可以在此处查找各种类型的组合器：developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/… 空格非常重要。<div class="rgb" /> - 这只是一个我忘记删除的测试，但它在那里，我很抱歉我忘了删除它，但是在 css 中选择所有 div，然后过滤他们到所有具有“rgb”类的div？ @AHaworth
我的问题已更新以消除抱歉
您错误地使用了!important。它遵循每个属性，而不是选择器规则。喜欢background: red !important;。由于您使用的是背景动画和文本填充，因此您需要在选择中取消设置这些属性。您不能简单地覆盖颜色。
啊，当我尝试这样做时，虽然它让我回到了原来的位置，当我在那里输入代码时，它根本不会向我显示文本，只是掩盖文本而不是让它变白再次。
【参考方案1】：
要避开过滤器，一种有点笨拙的方法可能是拥有第二个标题副本，该副本位于原始标题之上，实际上是进行选择的元素。
它的文本和背景是透明的，直到有一个选区，此时选区（仅）分别变为白色和红色。
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Montserrat', sans-serif;
.rgb
position: fixed;
background: linear-gradient(to right, #008AFF, #00FFE7);
animation: animate 10s forwards infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
.shadow
color: transparent;
position: absolute;
top: 0;
left: 0;
background-color: transparent;
.shadow::selection
background: red;
color: white;
@keyframes animate
0%,
100%
filter: hue-rotate(0deg);
50%
filter: hue-rotate(360deg);
<h1 class="rgb">Welcome to my webpage</h1>
<h1 class="shadow">Welcome to my webpage</h1>【讨论】：
以上是关于CSS 选择器 ::selection 没有使用给定的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章