css - 在关注子按钮时阻止父 CSS

Question

我有一个 <div>包裹在 <a> 内. a:active有css转换元素，但我不想要这种行为 (transform)在我专注于 bx--overflow-menu 的时候在那里 child 。我将 NextJS 与 styled-jsx 和 SaSS 一起使用。下面是我的代码:

<a class="singleTile" data-cta-type="unimplemented" href="test">
   <div class="bx--row">
      <div class="bx--overflow-menu" role="button" aria-haspopup="true" aria-expanded="false" aria-label="Menu" tabindex="0">
         <svg focusable="false" aria-label="open and close list of options" role="img" class="bx--overflow-menu__icon">
            <circle cx="8" cy="3" r="1"></circle>
            <circle cx="8" cy="8" r="1"></circle>
            <circle cx="8" cy="13" r="1"></circle>
            <title>open and close list of options</title>
         </svg>
      </div>
      <div class="bx--col">
         <p class="name-212">cougar</p>
         <p class="name-213">Version:<span class="" style="display: inline;">test.1</span></p>
      </div>
   </div>
</a>

样式:

<style>
.singleTile {
    flex: none;
    width: 100%;
    border: 1px solid #e0e0e0;
    display: block;
    padding: 1rem;
    transition: all 150ms cubic-bezier(0.2, 0, 0.38, 0.9);
    background-color: #ffffff;
}
a.singleTile:hover {
    border-color: red;
}
a.singleTile:active {
    transform: scale(.994);
}
.bx--overflow-menu{
    top: 0;
    right: .25rem;
    position: absolute;
}
</style>

我有一些想法，它不能只用 CSS 来完成，而且我也不能使用 jQuery。任何其他建议都会有所帮助。

Answer 1

目前 css 中没有父选择器。有可能在下一个 css4 上实现它。

.singleTile:has(> bx--overflow-menu:active) { /* styles to apply to the singleTile tag */ }