CSS ohne particlular Kind Spalte

Question

ich eine kleine Unterstützung benötigen, können here.You sehen, dass

.row1 { 
     .col * { 
      padding: 10px 10px 5px 5px; 
     } 

hier ist es für alle das Kind gilt col elements.But ich entfernen müssen, um es von <ion-fab> Spalte. Mit anderen Worten, es sollte nicht auf diese Spalte angewendet werden

<ion-col col-6> 
     <ion-fab center middle> 
      <button ion-fab mini><ion-icon name="add"></ion-icon></button> 
     </ion-fab> 
     </ion-col>` 

Können Sie mir sagen, wie das geht?

.html

<ion-grid no-padding> 
    <ion-row class="row1"> 
     <ion-col col-6 *ngFor="let d of data"> 
     <playlist [data]="d"></playlist> 
     </ion-col> 
     <ion-col col-6> 
     <ion-fab center middle> 
      <button ion-fab mini><ion-icon name="add"></ion-icon></button> 
     </ion-fab> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 

.scss

.content { 
     ion-grid { 
      height: 40%; 
     } 
     .row1 { 
      .col * { 
       padding: 10px 10px 5px 5px; 
      } 
      flex: 1; 
     } 
     img { 
      width: 100%; 
      height: 100%; 
     } 
    } 

Renderd Inhalte im Browser:

<ion-grid class="grid" no-padding=""> 
    <ion-row class="row1 row"> 
     <!--bindings={ 
    "ng-reflect-ng-for-of": "[object Object],[object Object" 
}--><ion-col class="col" col-6=""> 
     <playlist ng-reflect-data="[object Object]"><div class="playlist"> 
    <span>Just Added</span> 
    <img src="./assets/images/img1.jpg" alt="Just Added"> 
</div></playlist> 
     </ion-col><ion-col class="col" col-6=""> 
     <playlist ng-reflect-data="[object Object]"><div class="playlist"> 
    <span>My Favorites</span> 
    <img src="./assets/images/img2.jpg" alt="My Favorites"> 
</div></playlist> 
     </ion-col><ion-col class="col" col-6=""> 
     <playlist ng-reflect-data="[object Object]"><div class="playlist"> 
    <span>Presentation 1</span> 
    <img src="./assets/images/img3.jpg" alt="Presentation 1"> 
</div></playlist> 
     </ion-col> 
     <ion-col class="col" col-6=""> 
     <ion-fab center="" middle=""> 
      <button ion-fab="" mini="" class="fab fab-md"><ion-icon class="fab-close-icon icon icon-md ion-md-close" name="close" role="img" aria-label="close" ng-reflect-name="close"></ion-icon><span class="button-inner"><ion-icon name="add" role="img" class="icon icon-md ion-md-add" aria-label="add" ng-reflect-name="add"></ion-icon></span><div class="button-effect"></div></button> 
     </ion-fab> 
     </ion-col> 
    </ion-row> 
    </ion-grid> 

gerenderten Bild:

Answer 1

Die einfachste scheint mir wirklich, dass ion-col Element zu machen, die die ion-fab innen einen zusätzlichen Klassennamen haben müssen, sagen no-pad, und die Wähler ändern:

.col:not(.no-pad)