焦点伪类:focus-within是否可以排除特定元素？

Question

我有一个像这样的步进组件

请注意，DOM结构大致如下

<div class="my-stepper">
   <button>-</button>
   <input type='number' />
   <button>+</button>
</div>

我使用了.my-stepper:focus-within，以确保在输入过程中整个步进器看起来都是聚焦的。

但是，我不喜欢当你聚焦到按钮时，会形成重复的聚焦状态。

我希望使用.my-stepper:focus-within:not(button:focus)这样的东西来确保如果焦点在输入框上，容器应该看起来是聚焦的；但是如果焦点在按钮上，容器就不应该看起来是聚焦的。

如何在不更改我的DOM的情况下获得我想要的效果？

- stackoverfloweth

---

请添加一个可工作的HTML+CSS代码片段。我们不知道你的CSS是什么样子的，所以只能做出一些假设。 - Jorge Fuentes González

顺便说一下，不行。 - Jorge Fuentes González

Answer 1

:has() 可以帮助你得到想要的效果。但请注意，目前浏览器支持并不完全。但我认为这很好地符合渐进增强的思想。

MDN

.my-stepper:focus-within {
  outline: 1;
}

.my-stepper:has(button:focus) {
  outline: 0;
}

- Craig Harshbarger

Answer 2

考虑将按钮提取到容器之外。这样可以让您仅在步进器内进行集中操作：

.box {
position: relative;
width: 100px;
}
.btn-layer {
top:0;
position: absolute;
}
.minus {
left: 0;
}
.plus {
right: 0
}

input {
width: 20px;
}

<div class="box">
  <div class="my-stepper">
     <input type='number' />
  </div>
  <div class="btn-layer">
         <button class="minus">-</button>
         <button class="plus">+</button>
  </div>
</div>

- Piotr Migdał