css - 子元素上的 SCSS 文本装饰

Question

悬停时在嵌套上应用文本装饰的正确语法是什么。

例如，假设我们有HTML 结构:

<div class="main-wrapper">
 <img src="/abcd.jpg" /> 
 <a href="http://www.google.com"> Click me! </a>
</div>

我想在 ma​​in-wrapper 上悬停时应用 text-decoration: underline on a(link) 元素

谢谢

Answer 1

你想要 scss

    .main-wrapper{
      a {
        text-decoration: none;
      }

      &:hover {
        a {
          text-decoration: underline;
        }
      }
    }

它给出了下面提到的 css

.main-wrapper:hover a {
  text-decoration: underline;
}

.main-wrapper a {
  text-decoration: none;
}

<div class="main-wrapper">
  <img src="/abcd.jpg" />
  <a href="http://www.google.com"> Click me! </a>
</div>