这是我网站的 HTML 示例。当某个类添加到带有 img 的容器时，我想更改 CSS。在这种情况下，在 img 中添加了一个类 onclick。添加类和删除类时如何添加 CSS。请参阅下面的示例。我看到一些使用 javascript 的教程，但这也可以仅使用 CSS 来完成吗？
.container //when image is unselected{
border: 2px dotted;
}
.container //when image is selected{
border: 2px solid;
}//When image is unselected
<div class="container">
<div class="checkbox">
<div class="value">
<img class="some-image">
</div>
</div>
</div>
//When image is selected
<div class="container">
<div class="checkbox">
<div class="value">
<img class="some-image selected">
</div>
</div>
</div>是的，这仅使用 CSS 是可能的。这里的关键是使用contenteditable全局属性和:target伪类，如下所示。
.container {
display: inline-block;
}
.container:focus {
outline: none;
}
.container:focus img {
border: 2px dotted;
}
.container img {
border: 2px solid;
}<div>
<div class="container" contenteditable>
<div class="checkbox">
<div class="value">
<img class="some-image" src="https://via.placeholder.com/100x100">
</div>
</div>
</div>
<div class="container" contenteditable>
<div class="checkbox">
<div class="value">
<img class="some-image" src="https://via.placeholder.com/100x100">
</div>
</div>
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句