如何仅在input获焦而非button获焦时为元素应用样式？

你写的SCSS选择器逻辑有误，.div:focus-within:is(button)是试图选择本身是button且包含聚焦元素的div，这完全不符合需求——我们要实现的是：当div的聚焦状态来自内部的input，而非button时，为div设置样式。

方案1：纯CSS实现（现代浏览器支持） #

利用:focus-within判断div内存在聚焦元素，再通过:not(:has(button:focus))排除button聚焦的场景，就能精准匹配input聚焦的情况：

.div:focus-within:not(:has(button:focus)) {
  // 示例样式：添加蓝色边框
  border: 2px solid #007bff;
  padding: 4px;
}

如果需要更严谨地限定只有input聚焦时才生效，可以补充:has(input:focus)条件：

.div:focus-within:has(input:focus):not(:has(button:focus)) {
  border: 2px solid #007bff;
  padding: 4px;
}

方案2：JavaScript辅助（兼容旧浏览器） #

如果需要兼容不支持:has()选择器的旧版浏览器（如Firefox 108及更早版本），可以通过监听焦点事件手动控制类名：

JS代码

const container = document.querySelector('.div');
const input = container.querySelector('input');
const button = container.querySelector('button');

function toggleFocusClass() {
  container.classList.toggle('input-focused', document.activeElement === input);
}

input.addEventListener('focus', toggleFocusClass);
input.addEventListener('blur', toggleFocusClass);
button.addEventListener('focus', toggleFocusClass);
button.addEventListener('blur', toggleFocusClass);

对应SCSS

.div.input-focused {
  border: 2px solid #007bff;
  padding: 4px;
}

内容的提问来源于stack exchange，提问作者Get Off My Lawn