避免 css 过滤器反转 div::selection 中的更改

Question

* ::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 都有单独的 class。我想在 .a class 中应用 filter:invert(1)。同时::selection颜色不应该在.aclass中反转。我试过上面的代码。但是，它没有用。我也试过.a :not(::selection)。它也不会工作。有什么办法可以解决这个问题？

Answer 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 中的更改

avoid css filter invert changes in div::selection

html

css

css-selectors

textselection

pseudo-element