如何用CSS仅选中含文本元素设置反色，避免同时反转图片与图标

纯CSS实现方案 #

你可以通过「父容器整体反色+媒体元素二次反色还原」的逻辑解决，不需要匹配内部自定义类名，直接通过元素类型筛选不需要反色的内容即可，代码示例如下：

.main {
  background: black;
  /* 容器整体反色，参数和你之前设置的保持一致即可 */
  filter: invert(80%);
}

/* 所有不需要反色的元素，叠加二次反色恢复原本色彩 */
.main img,
.main svg,
.main video,
.main iframe,
.main canvas,
.main [class*="icon"], /* 匹配所有类名带icon的图标元素，不需要可删除 */
.main [style*="background-image"] /* 匹配带背景图的元素，不需要可删除 */
{
  /* 反色参数和父容器设置的保持一致，即可完全还原 */
  filter: invert(80%);
}

配套你的HTML结构无需做任何修改即可生效。

原理说明 #

CSS的filter属性效果会继承给所有子元素，且invert效果支持叠加：两次参数完全一致的反色操作，会让元素恢复到原始色彩状态。
如果后续发现还有其他类型的元素不需要反色，直接把对应标签/通用特征加到上面的排除选择器列表中即可。

内容的提问来源于stack exchange，提问作者Amir Rahman