从子 scss 调用父级答案

【问题标题】：Call parent from child scss从子 scss 调用父级
【发布时间】：2021-03-26 05:58:30
【问题描述】：

我有<td>，里面也有<a>。

例如。

<td>
     <a>test</a>
</td>
<td>

</td>

一开始<td>只有<a>。休息没有<a>。 我的要求是当悬停存在 <a> 时，我想突出显示 <td> 标签。

所以只有第一个 td 会在悬停时更改突出显示。

我的代码=>

td{
      
      $this:&;

      &:hover {
        a {          
          #{$this} & {
            background-color: blue;
          }
        }
      }
    }

但此代码不起作用。我错过了什么？

【问题讨论】：

这能回答你的问题吗？ Is there a CSS parent selector?
@Arkellys，我已经尝试过使用 has() 但无法正常工作。
@Loran: has() 仍然是“选择器第 4 级工作草案”的一部分，这意味着：计划可能会在未知的未来推出……这意味着您可以使用它用于项目，因为大约两年后（如果！）将引入浏览器支持。您可以检查自己的支持：caniuse.com/?search=has()。您是否有理由介意推荐的 JS 解决方案？
@Loran 我的回答能解决你的问题吗？
@robertp，感谢您的回答，看起来您的回答有效，但我尚未使用我的代码进行测试。我稍后会回答。再次感谢你。

标签： sass parent-selector

【解决方案1】：

由于 CSS 中没有父选择器，因此您有 2 个可行的选择。

在包含锚元素的 TD 上使用类名
使用链接的 &::after 伪元素应用样式

选项一更灵活，提供更多可能性。

SCSS 代码：

$col-blue: blue;
$col-yellow: yellow;

td {
  position: relative;
  padding: 10px;
  border: 1px solid $col-blue;

  // Option 1 - uses td for hover and pseudo element for styling
  &>a {
    &::after {
      content: "";
      position: absolute;
      display: none;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: $col-blue;
      z-index: -1;
    }
  }

  &:hover {
    &>a {
      color: $col-yellow;

      &::after {
        display: block;
      }
    }
  }
}

// Option 2 - apply class name to TD with link
.td-with-link {
  &:hover {
    color: $col-yellow;
    background: $col-blue;
  }
}

我设置了一个 JSFiddle 演示：https://jsfiddle.net/robertp/409un7hf/

【讨论】：