在父 SASS 上设置样式答案

【问题标题】：Setting style on parent SASS在父 SASS 上设置样式
【发布时间】：2018-01-11 15:42:00
【问题描述】：

我有以下 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 卡的边框颜色设置为红色，这等于 .infoMessages 类在 md-card 中可见。

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

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

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

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

你好，格伦

【问题讨论】：

这在 css 中是不可能的，你将如何使 .infoMessages 可见？为此，您将需要 javascript
或者只是改变结构，将.infoMessages放在md-card-content之外，也许在一个新标签内
或者也许在 md-card-content 上使用 ng-class="{'error': test1 === true}" 并应用你的风格

标签： css sass

【解决方案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;
    }
}

你的 codepen 的分支：https://codepen.io/Alvan/pen/RxyKMP

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

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

【讨论】：

【解决方案2】：

无法根据 CSS 中的子选择器或更高版本的同级选择器在父选择器上设置样式。选择器仅以两种基本方式起作用，即选择 HTML 文档下方的某个兄弟节点或某个嵌套的子节点。就像你不能在父级上设置样式一样，你也不能在前一个兄弟级上设置样式。

在您的示例中，您在这里的计算样式是 md-card-content + .infoMessages md-card，这将使 md-card 成为 .infoMessages 的子代

您可以通过使用 javascript 来更改颜色以确定错误是否可见，然后找到最接近的 md-card 父级，或者您可以将 error 类添加到 md-card，然后您可以更改颜色和可见性同时。

【讨论】：