SCSS父选择器设置失效：input获焦时无法为父元素应用边框样式

问题原因 #

SCSS 中的&符号仅用于拼接当前上下文的选择器，没有选择父元素的功能，你写的代码编译后会生成如下CSS：

.no-outline:focus {
  box-shadow: none;
}
.no-outline:focus.want-outline {
  border-radius: 2.5rem;
  border-color: #80bdff;
  border-width: 0.2rem;
}

这段规则要求同一个元素同时拥有.no-outline类、:focus状态、.want-outline类，但你的.want-outline是加在父级div上的，自然匹配不到。你之前尝试的&、> &写法都是在调整input元素自身的选择器，和父元素完全无关，所以不会生效。

解决方法 #

CSS本身没有传统意义上的父选择器，可根据兼容需求选以下方案：

方案1：使用:has()伪类（现代浏览器兼容，2023年后所有主流浏览器均支持） #

直接写如下SCSS即可实现子input聚焦时修改父元素样式，无需JS：

/* 原有input焦点样式 */
.no-outline:focus {
  box-shadow: none;
}
/* 匹配包含聚焦状态.no-outline元素的、带.want-outline类的父容器 */
.input-group.want-outline:has(.no-outline:focus) {
  border-radius: 2.5rem;
  border-color: #80bdff;
  border-width: 0.2rem;
}

方案2：兼容旧浏览器的JS方案 #

如果需要兼容IE或非常老版本的浏览器，用JS监听焦点事件切换父元素类即可：

const noOutlineInputs = document.querySelectorAll('.no-outline');
noOutlineInputs.forEach(input => {
  const parentGroup = input.closest('.input-group.want-outline');
  if (!parentGroup) return;
  // 聚焦时加类
  input.addEventListener('focus', () => parentGroup.classList.add('is-child-focused'));
  // 失焦时删类
  input.addEventListener('blur', () => parentGroup.classList.remove('is-child-focused'));
});

对应SCSS代码：

.input-group.want-outline.is-child-focused {
  border-radius: 2.5rem;
  border-color: #80bdff;
  border-width: 0.2rem;
  .no-outline:focus {
    box-shadow: none;
  }
}

通用排查思路 #

• 先把SCSS编译后的CSS复制出来查看实际匹配规则，确认选择器指向的元素是否和预期一致
• 打开浏览器控制台元素面板，选中要加样式的父元素，查看Styles栏：如果没有你的样式出现就是选择器匹配错误，如果样式出现但被划掉就是优先级被其他规则覆盖
• 排查时可以先给父元素写死一个高优先级测试样式（比如border: 2px solid red !important），确认样式本身没有被其他规则拦截，再调整选择器逻辑

内容的提问来源于stack exchange，提问作者bilpor