为“活动”和“非活动”图形类添加不同的不透明度

Question

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

有两个 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 类的元素。