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

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

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

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

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

问候格伦

Answer 1

无法根据CSS中的子级或更高级别的兄弟选择器在父级上设置样式。选择器只能以两种基本方式工作，方法是在HTML文档或某些嵌套子节点中选择一些兄弟。正如您无法在父级上设置样式一样，您无法在之前的兄弟上设置样式。

在您的示例中，您在此处使用的计算样式为md-card-content + .infoMessages md-card，这会使md-card成为.infoMessages的孩子

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

Answer 2

您无法将样式应用于父选择器。它不存在于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。 MH。对不起，我的错误，但这对于md-card也是一样的。

在父SASS上设置样式

2 个答案: