如果无JavaScript单击时，是否可以激活DIV

Question

只是想知道是否可以在不使用JavaScript的情况下调用DIV。

例如

my_div:hover{ add new layout}

是否有单击版本，例如

my_div:click{add new layout}

谢谢

Answer 1

是的，如果您将tabindex="0"添加到DIV中，则可以单击它，然后可以使用:focus伪级使用样式。

<div class="clickable" tabindex="0"></div>
.clickable {
  height: 100px;
  background: blue;
}
.clickable:focus {
  background: red;
}

codepen示例。单击DIV应将其重点放置并应用：焦点CSS。单击它将解开（模糊）并重置默认样式。

Answer 2

不是直接的，但是您可以使用复选框伪造它：

input[type=checkbox] {
  display: none;
}
.content {
  display: none;
  padding: 20px;
  background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
  display: block;
}

<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
  <h3>Content</h3>
  <p>lorem20</p>
</div>