Angular 1.5组件css使用嵌套组件进行范围设定

Question

我尝试使用angular 1.5组件来创建按钮组。

<button-group size="default">
   <my-button>Button 1</my-button>
   <my-button>Button 2</my-button>
</button-group>

但是，它编译成如下：

<div class="btn-group" ng-transclude>
   <my-button class="ng-scope ng-isolate-scope>
      <button class="btn>Button 1</button>
   </my-button>

   <my-button class="ng-scope ng-isolate-scope>
      <button class="btn>Button 1</button>
   </my-button>
</div> 

所以现在我的CSS范围已经搞砸了：

.btn-group  > .btn:not(:first-child) {
     background: red; //<- doesnt work
 }

基本示例：

const buttonGroup = {
    bindings: {},
    transclude: true,
    template: myButtonGroupTemplate
  };

Answer 1

您可以向组件添加类

类似的东西：

HTML

 <button-group size="default">
    <my-button class="awesome-class-btn">Button 1</my-button>
    <my-button class="awesome-class-btn">Button 2</my-button>
 </button-group>

CSS

.btn-group .awesome-class-btn > .btn:not(:first-child) {
     background: red;
}