LESS已构建嵌套选择器层级时如何给祖先追加类控制后代样式

你可以通过两种方式在现有嵌套结构基础上实现需求，不需要全量重写所有嵌套路径： #

方案1：顶层附加状态规则（优先级可控，推荐） #

直接在.grandparent的最外层嵌套块中新增带状态的规则即可，如果你需要规则优先级足够高、不会被原有嵌套样式覆盖，可以写全层级路径：

.grandparent {
  some: style;

  /* 新增状态控制块 */
  &.visiting {
    /* 写全路径时编译后优先级高于原有普通嵌套规则，不会被覆盖 */
    .parent .child .grandchild {
      visibility: hidden;
    }
    /* 如果需要控制多个后代，直接在这个块里加对应规则即可 */
    /* .parent .child { ... } */
  }

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
       } 
     }
   }
}

上述代码编译后生成的CSS为：

/* 原有普通规则优先级：0,4,0 */
.grandparent .parent .child .grandchild {
  the: picture;
}
/* 状态规则优先级：0,5,0，高于普通规则，生效 */
.grandparent.visiting .parent .child .grandchild {
  visibility: hidden;
}

如果你确实需要和你示例完全一致的短选择器，只需要把上面状态块里的路径改成.grandchild即可，不过该规则优先级会低于原有普通嵌套规则，需要搭配!important才能生效，不推荐。 #

方案2：后代规则内声明（样式收拢，适合零散修改） #

如果你的项目使用LESS 3.5及以上版本，可以使用父选择器向上查找语法^&，直接在目标后代的嵌套块内声明规则，不需要把状态提到顶层：

.grandparent {
  some: style;

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
          /* ^& 代表最上层的父选择器 .grandparent */
          ^&.visiting & {
            visibility: hidden;
          }
       } 
     }
   }
}

该写法编译后同样会生成优先级足够的完整路径规则，且所有和.grandchild相关的样式都收拢在同一个嵌套块中，更适合仅少量后代需要适配状态的场景。

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