应用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子列

回答

相关问题