如何用SCSS访问祖父元素？聚焦输入框时隐藏指定标签子元素

正确的SCSS写法 #

因为label是input的兄弟元素，直接用相邻兄弟选择器就能定位到它，实现聚焦隐藏效果：

.input-wrapper {
  input:focus + label > span:nth-child(2) {
    display: none;
  }
}

如果习惯嵌套写法，也可以这样写：

.input-wrapper {
  input {
    &:focus + label > span:nth-child(2) {
      display: none;
    }
  }
}

你之前写法的问题 #

• 第一种写法里的parent是无效语法：SCSS没有内置的父元素选择器，你定义的$this: parent也无法实现向上选择父元素的效果，CSS本身不支持父选择器，所以只能通过兄弟选择器定位label。
• 第二种写法的类名和选择关系错误：你的DOM里label没有.input-wrapper__label这个类，而且就算有，input:focus后直接写这个类，是在找input的子元素，但label是input的兄弟，不是子元素，选择器完全不匹配。

关于条件语句的使用 #

单纯实现你当前的需求，不需要条件语句，上面的选择器就足够。但如果需要根据变量或其他条件控制隐藏逻辑（比如切换主题、开关功能），可以用SCSS的@if条件语句，示例：

// 定义变量控制是否开启隐藏逻辑
$hide-label-span-on-focus: true;

.input-wrapper {
  input {
    &:focus {
      @if $hide-label-span-on-focus {
        + label > span:nth-child(2) {
          display: none;
        }
      }
    }
  }
}

修改$hide-label-span-on-focus的值就能切换是否执行隐藏逻辑，但对于你的基础需求，没必要多此一举。

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