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

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

<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 示例中重现相同的结果?

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

span 使用类似于 ing-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;
}