Sass/CSS/Angular 1 - 选择相同级别的元素进入 ng-class 允许的类答案

【问题标题】：Sass/CSS/Angular 1 - Select element same level into ng-class allowed classSass/CSS/Angular 1 - 选择相同级别的元素进入 ng-class 允许的类
【发布时间】：2018-06-07 06:18:35
【问题描述】：

<button>
  <span>Search</span>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
</button>

如果允许fa-spinner，我想选择span 元素（默认情况下采用fa-search）如果span 元素低于i 元素，我们可以这样做：

HTML：

<button>
  <i class="fa"
     ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
     aria-hidden="true">
  </i>
  <span>Search</span>
</button>

CSS：

.fa-spinner {
  font-size: 18px;

  & ~ span {
    padding-left: 10px;
  }
}

如何在第一个 HTML 示例中重现相同的结果？

【问题讨论】：

为什么不使用"$ctrl.pending ? 'fa-spinner' : 'fa-search'" 为span 添加额外的类以满足您的造型需求？
@RajeevRanjan 是的，我们可以这样做，但我想避免添加额外的 ng-class
stackoverflow.com/a/1817801/3953479 这可能对你有帮助。
@RajeevRanjan 是 +1，我将在 span 元素上添加另一个 ng-class

标签： css angularjs sass ng-class

【解决方案1】：

正如 here 解释的那样，在 CSS 中无法选择上一个兄弟姐妹

使用ng-class 的最佳方式类似于i 用于span，如下所示：

<button>
    <span  ng-class="$ctrl.pending ? 'left-padding' : ''">Search</span>
    <i class="fa"
    ng-class="$ctrl.pending ? 'fa-spinner' : 'fa-search'"
    aria-hidden="true">
    </i>
</button>
//css
span.left-padding 
{
    padding-left: 10px;
}

【讨论】：