当在另一个类中添加一个类时，在容器类上添加CSS，反之亦然

Question

这是我的网站的HTML示例。 当某个类添加到带有img的容器中时，我想更改CSS。 在这种情况下，将onclick类添加到img。 添加类并删除类时，如何添加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> 

Answer 1

是的，仅使用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> 

Answer 2

在JavaScript中，这很容易完成。 JS允许您编写许多事件驱动的代码。 这是您尝试在JS中执行的示例。

链接

如果您正在寻找纯CSS解决方案，那么您将得到的最接近的结果是：

.container {
  border: 2px dotted;
}

.container:active {
  border: 2px solid;
}