Sass/CSS/Angular 1 - Select 元素同级进入 ng-class 允许 class

Question

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

如果允许 fa-spinner，我想 select 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 示例中重现相同的结果？

Answer 1

因为在 CSS 中无法选择前一个兄弟姐妹，正如所解释的 here

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

<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;
}

Sass/CSS/Angular 1 - Select 元素同级进入 ng-class 允许 class

Sass/CSS/Angular 1 - Select element same level into ng-class allowed class

css

angularjs

sass

ng-class