css - 应用没有特定子列的 CSS

Question

我在这里需要一点支持。你可以看到

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

这里它适用于所有的 child col元素。但我需要将其从 <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%;
        }
    }

在浏览器上呈现内容:

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

渲染图像:

Answer 1

在我看来，最简单的方法确实是让 ion-col 元素拥有一个额外的类名，比如 no- pad，并将选择器更改为:

.col:not(.no-pad)