避免 css 过滤器反转 div::selection 中的更改
Posted
技术标签:
【中文标题】避免 css 过滤器反转 div::selection 中的更改【英文标题】：avoid css filter invert changes in div::selection 【发布时间】：2021-11-16 15:59:33 【问题描述】：* ::selection
background: #000;
color: #fff;
.a, .b
background: red;
color: yellow;
.a
filter: invert(1);
.a::selection
filter: invert(1);
<div class='a'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>
<br/>
<div class='b'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>我有两个包含一些文本的 div。两个 div 都有单独的类。我想在.a 类中应用filter:invert(1)。同时::selection 的颜色不应该在.a 类中反转。我试过上面的代码。但是，它没有用。我也试过.a :not(::selection)。它也行不通。有什么办法解决吗？
【问题讨论】：
【参考方案1】：您可以在.a 中切换选择的颜色 - 这样当该元素的全部内容反转时，您就可以再次获得所需的颜色。
* ::selection
background: #000;
color: #fff;
.a, .b
background: red;
color: yellow;
.a
filter: invert(1);
.a::selection
color: #000;
background: #fff;
<div class='a'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>
<br/>
<div class='b'>
The amount of the conversion, specified as a number or a percentage. A value of 100% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The lacuna value for interpolation is 0.
</div>【讨论】：
以上是关于避免 css 过滤器反转 div::selection 中的更改的主要内容，如果未能解决你的问题，请参考以下文章