Question

所以我通过sass（scss）写我的CSS。我使用＆符号（＆amp;）来定位孩子。但是，当我做某个元素的悬停状态时，我再也不能让孩子们了。有没有办法做到这一点？

要明确：我想按照他们的班级而不是他们的元素（例如：span）来定位孩子。

HTML：

<div class="container">
    <div class="container__inner">
       <p class="container__inner__paragraph">
       foo to the
       <span class="container__inner__paragraph__highlight">
       bar
      </span>
      </p>
    </div>
</div>

SCSS

.container{
  &__inner{
    &__paragraph{
      color: yellow;
      background: black;

      &:hover{
        background: rgba(0,0,0, .3);

        // This obviously works
        span{
          color: green;
        }

        // This obviously works too
        .container__inner__paragraph__higlight{
          color: green;
        }

        // This however doesn't work
        &__highlight{
          color: green;
        }
      }

      &__highlight{
        text-transform: uppercase;
        font-weight: 700;
      }
    }
  }
}

有希望解释我的斗争的代码笔：

http://codepen.io/anon/pen/GZqGPq

Answer 1

您可以尝试这种方式：

.container__inner__paragraph {
  &:hover &__highlight {
    background: red!important;
  }
}

但我不是百分百肯定你想要什么？

Answer 2

你现在可以使用类名，你的代码是正确的，你只有一个拼写错误，你的scss中有.container__inner__paragraph__higlight但是正确的类名是.container__inner__paragraph__highlight < / p>

http://codepen.io/anon/pen/yOJEdE

Answer 3

如果您需要在悬停在段落标记上时设置突出显示类的样式，请尝试此操作：

.highlight＆amp; {color：blue;}

Answer 4

感谢@ simey.me我找到了合适的解决方案。如果在＆amp;：hover后面添加＆符号（＆amp; -mark），则可以以＆符号方式定位子类。

恋人的Codepen！ http://codepen.io/anon/pen/GZqGPq

scss：

.container{
  &__inner{
    &__paragraph{
      color: yellow;
      background: black;
      display: inline-block;
      padding: 4rem;

      &:hover &{
        &__highlight{
          color: green;  
        }
      }

      &__highlight{
        text-transform: uppercase;
        font-weight: 700;
      }
    }
  }
}

当我的选择器有伪类时，如何附加到类名？

4 个答案: