html - 是否可以聚焦 div 并从另一个更改 Css？

Question

div:focus ~ .div2 {
    background-color:red;
    height:400px;
    margin-top:20px;
    margin-left:20px;
};

如果用户点击 div，div2 的 CSS 应该改变。这段代码可能吗？

Answer 1

要使 div 获得焦点，需要 tabindex 属性。使用 value:0 ，因此它不会弄乱可以通过 tab 获得焦点的其他元素的顺序。

https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex

An element with the tabindex attribute specified is interactive content.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the platform convention;

div {border:solid;
}

div:focus~.div2 {
  background-color: red;
  height: 400px;
  margin-top: 20px;
  margin-left: 20px;
}
.div2 {
  background-color: yellow;
  height: 200px;
  margin-top: 0px;
  margin-left: 0px;
  transition: 0.5s;
}

<div tabindex="0"> click or tab can give me the focus, click outside and i loose it </div>
<div class="div2"> div2</div>