Sass中如何根据子元素特定类选择父元素？Tooltipster适配需求

嗨，这个问题我之前也碰到过！先直接给你结论：原生CSS（包括Sass编译后的最终CSS）是没有反向父选择器的——也就是说你没法仅通过子元素的类/id来直接选中它的父元素，毕竟CSS的选择器解析逻辑是从父到子的，反向选择目前还不支持哦。

不过针对你用Tooltipster遇到的这个场景，有几个非常实用的解决办法，不用修改插件源码，就能逐个配置不同的提示框：

方法1：利用Tooltipster的theme选项（最推荐） #

Tooltipster本身就支持给单个提示框设置自定义主题，这官方自带的方式最省心。比如你有个带id="my-special-tooltip"的span，初始化的时候直接指定主题类：

$('#my-special-tooltip').tooltipster({
  theme: 'tooltipster-special-style'
});

之后你就能在Sass里精准定位这个提示框的内容区域了：

.tooltipster-special-style .tooltipster-content {
  background: #2c3e50;
  color: #ecf0f1;
  border-radius: 4px;
  /* 其他自定义样式 */
}

方法2：用回调函数给容器加自定义类 #

如果需要更灵活的控制，可以用Tooltipster的functionBefore回调，在提示框显示前给它的容器添加自定义标识：

$('#another-tooltip').tooltipster({
  functionBefore: function(instance) {
    // 给当前提示框的容器添加自定义类
    instance.tooltipster('element').addClass('tooltip-for-another-id');
  }
});

然后对应的Sass样式：

.tooltip-for-another-id .tooltipster-content {
  padding: 12px 16px;
  font-size: 14px;
}

为啥不用CSS反向选择？ #

再啰嗦一句：不管是原生CSS还是Sass，都没有真正的父选择器——Sass只是预处理器，最终编译出来的还是普通CSS，所以没法突破CSS本身的限制。与其纠结反向选择，不如利用插件自带的配置来给目标容器加标识，这才是高效的解决思路~

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