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

Question

这是我网站的 HTML 示例。当某些类添加到带有 img 的容器上时，我想更改 CSS。在这种情况下，一个类被添加到 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 global attribute和 :target pseudo class ，如下所示。

.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>