使用活动或选定图像放置属性

Question

每个产品都有多个变体，这些变体链接到不同的缩略图。 我可以点击每个缩略图以更大的尺寸预览

我希望活动缩略图的边框更加明显。

我已尝试使用：有效和 :: selection 这些代码，但它无法正常工作。

.productThumbs li img::selection {
    border-color: #ee0a3a !important;
}

.productThumbs li img:active {
    border-color: #ee0a3a !important;
}

我对以下方面没什么经验：active或:: selection属性

产品页面的链接：https://www.tresor-ethnique.com/collections/africain/products/boucles-oreilles-fleur-etoilee?variant=6090700914718

Answer 1

你正在查看错误的CSS选择器。此外，:active在这种情况下具有完全不同的含义。这意味着用户当前正在激活的链接（想想当前正在关闭的链接）：阅读更多here。

你想要的选择器是：

.productThumbs li .active

或

.productThumbs li .active img

这会使你的陈述看起来像这样：

.productThumbs li .active img {
    border: 1px solid #ee0a3a;
}

如果您希望在不缩小照片尺寸的情况下轻松获得更大的边框，则可以使用border: 1px solid #ee0a3a;代替box-shadow: 0 0 0 5px #ee0a3a;。