将不同的不透明度添加到“有效”和“非有效”数字类

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