html - 向 'active' 和 'non-active' 图形类添加不同的不透明度

Question

我正在尝试在轮播 slider 上的图像上创建不同的不透明度。

有两个 DIV 类，一个聚焦，另一个聚焦/不活动。

1. figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded"

2. figure class="flkty-carousel__cell gallery-item object-fit-img object-fit-img--loaded is-selected"

我希望加载的 DIV 的不透明度为 0.5，“已选择”的 DIV 的不透明度为 1。

我可以轻松地将其添加到 CSS 中:

.flkty-carousel__cell {
    opacity: 0.5;
}

但现在所有图像的不透明度都为 0.5。

如何添加正确的 CSS 来分隔两个 DIV 类？

Answer 1

.flkty-carousel__cell.is-selected {
    opacity: 1;
}

此选择器将以同时具有 .flkty-carousel__cell 类和 .is-selected 类的元素为目标。