将两个包含“过滤器”的 CSS 类应用于 HTML 元素[重复]答案

【问题标题】：Apply two CSS classes which contain `filter` to an HTML element [duplicate]将两个包含“过滤器”的 CSS 类应用于 HTML 元素[重复]
【发布时间】：2019-12-29 12:40:06
【问题描述】：

例如，我想将aaa 和bbb 都应用于一个元素，但似乎一次只能使用一个。 class="aaa bbb" 没用。怎么做？

<html>
    <head>
        <style>
        .aaa
        {
            filter: drop-shadow(10px 10px 10px black);
        }

        .bbb
        {
            filter: grayscale(100%);
        }
        </style>
    </head>
<body>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"
        class="aaa bbb"
        style="margin:40px" />
</body>
</html>

【问题讨论】：

只能应用一个滤镜 css 属性，所以如果你想同时做投影和灰度，它需要使用相同的滤镜规则： filter: drop-shadow(10px 10px 10px black) grayscale (100%)
我需要aaa 和aaa + bbb（但不是bbb 单独）。有没有办法让bbb继承aaa？还是我必须手动将aaa 的部分添加到bbb？
不幸的是，它无法以您想要的方式继承，您需要复制到 bbb 以包含完整的过滤器

标签： html css

【解决方案1】：

.bbb filter 覆盖 .aaa filter。这就是 CSS 的工作方式，它覆盖了先例属性。如果您想同时应用这两个过滤器，请使用一个类：

.aaa {
    filter: grayscale(100%) drop-shadow(10px 10px 10px black);
}

【讨论】：