應用CSS沒有particlular子列

我需要一個小的支撐here.You可以看到應用CSS沒有particlular子列

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

這裏它適用於所有的孩子col elements.But我需要從<ion-fab>列中刪除。換句話說，它不應該適用於這一列

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

你能告訴我該怎麼做嗎？

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內容：

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

渲染圖像：

來源

2017-08-15 Sampath

呈現時_.html_的內容有所不同嗎？即選擇器'.col'適用於什麼？ – marekful

難道你不能只從選擇器中刪除星號，以便只將填充應用於單元格？ –

請參閱更新後的文章@marekful – Sampath

最簡單的在我看來，真正使該ion-col元素，這將有ion-fab裏面有一個額外的類名，說no-pad，並選擇更改爲：

來源

2017-08-15 04:43:37 marekful

應用CSS沒有particlular子列

回答

相關問題