如果孩子有特定的班级，Sass 选择父母

Posted 2023-05-07

【中文标题】如果孩子有特定的班级，Sass 选择父母

【英文标题】：Sass select parent if child has a specific class

【发布时间】：2018-08-11 13:46:19

【问题描述】：

如果子元素包含某个类，是否有任何方法可以在 sass 中选择父元素？

基本上我正在使用 tooltipster 插件并遇到此问题

HTML

<div class="tooltipster-content">
  <span id="note-options">
    <ul>
      <li>Create new note</li>
      <li>Add new edit note</li>
    </ul>
  </span>
</div>

CSS

#note-options 
   //From here, select the .tooltipster-content parent
     ul 
       li 

       
     

我需要能够根据 span 标签的 id 选择 .tooltipster-content 类。

Tooltipster 将始终使用相同的 html 结构生成，但我不想更改所有工具提示的 tooltipster 包装器，我想按每个工具提示进行。

由于 tooltipster 不会将您指定的 id 添加到父包装器以进行基本的 CSS 编辑，我能想到的唯一方法是尝试使用 span ID 来选择最接近的 .tooltipster-content 类。

这可以实现吗？

注意 - 我不想使用 javascript/jquery 来解决这个问题，我想尝试在 CSS/SASS 中实现它。

【问题讨论】：

我不确定我是否理解您的问题。如果您想拥有可以添加的选择器（如果使用 sass）#note-options .tooltipster-content 如果您希望注释选项使用与 tooltipster 相同的规则集，则可以使用内置 mixin @extend (.你的班级名称）

我知道这在 CSS 中是无法实现的，这就是为什么我说我正在尝试使用 SASS 来实现它，其中有一个父选择器 (&)。感谢您的意见，但请正确阅读问题。 浏览器不理解 SASS，它们只理解 CSS，所以 没有任何事情 不能在 CSS 中完成永远 可以使用任何预处理器（音节 pre 清楚地表明）。同样在 SASS 中，& 并不是真正的父选择器，它只是意味着用目前创建的选择器替换它。

【参考方案1】：

不。在 CSS 或任何预处理器中，您无法在 dom 中向上移动以选择父级。 JS是唯一的办法。

如果你有 jQuery，你可以简单地使用.parent()。