css - 在父 SASS 上设置样式

Question

我有以下 HTML。在这种情况下，它有一个按钮来切换错误消息，但在现实生活中这将是动态的

<md-card>
  <md-card-content layout-padding>
    <div class="subtitle"><span translate="allocation"></span></div>
    <div><md-button ng-click="test = !test">Testing</md-button></div>
    <div class="infoMessages" ng-show="test">
      Error
    </div>
  </md-card-content>
</md-card>

<md-card>
  <md-card-content layout-padding>
    <div class="subtitle"><span translate="allocation"></span></div>
    <div><md-button ng-click="test = !test">Testing</md-button></div>
    <div class="infoMessages" ng-show="test">
      Error
    </div>
  </md-card-content>
</md-card>

现在我试图在错误可见时将 md-card 的边框颜色设置为红色，这等于 .infoMessages 类在 md- 中可见卡片。

我尝试了一些 scss 配置，但我似乎无法选择我的 parent 。我认为这很接近，但我不确定。

md-card {
  md-card-content + .infoMessages & {
    border: 1px solid red;
  }
}

测试用码笔:https://codepen.io/cskiwi/pen/jYxyqy

我开始怀疑这是否可能，有什么建议吗？无论如何，已经感谢您的阅读!

问候格伦

Answer 1

您不能将样式应用于父选择器。它不存在于 css 中，也不存在于 sass 中。

但是你可以在 md-card-content 上使用 ng-class :

<md-card-content layout-padding ng-class="{'error': test1 == true}">

然后像这样应用样式:

md-card-content {
    &.error {
        border: 1px solid red;
    }
}

代码笔的分支:https://codepen.io/Alvan/pen/RxyKMP

顺便说一下，我需要在 md-card-content 上设置 display:block;，因为这个元素根本没有基本样式。

哦，抱歉，您说的是 md-card。嗯。抱歉，我的错误，但这对 md-card 也是一样的。