Question

有没有办法检查 .link:focused 是否可以更改 .box 的显示属性？如果可能的话，我试图避免使用 JS，但不确定是否可以通过纯 CSS 或 SCSS 方式完成。

<a class="link" title="foo">My Title</a>
<div class="container">
   <div class="box"></div>
</div>

Answer 1

您可以按照 Gil 的建议使用 adjacent sibling combinator (+)。此外，请确保设置 href 属性以使您的 <a> 锚元素可聚焦。我建议使用哈希 (#) 以便页面不会导航。

此外，您可以在 > 和 .container 之间加入 child combinator (.box) 以提高特异性。

.container > .box {
  width: 0;
  height: 0;
}

a:focus + .container > .box {
  width: unset;
  height: unset;
  background: #FF0;
}

a:focus + .container > .box::after {
  content: 'Focused';
}

<a class="link" title="foo" href="#">My Title</a>
<div class="container">
   <div class="box"></div>
</div>

css：检查兄弟姐妹是否聚焦

1 个答案: