如何使Angular中的styles.css不影响使用该选择器的每个元素？

Question

I can align the content of my grid tiles but I only ever wanted it to affect the table that was inside of a grid.

I have this:

.mat-grid-tile .mat-figure {
   justify-content: flex-start !important ;
   align-items: flex-start !important;
}

EDIT: This piece of css above came from this previous solutution: Angular Material 6 grid list align-items and justify-content to flex-start

in styles.css but obviously it affects everything that's inside of a tile but I only want it to affect my mat-table . Is there a way to make this not be the case?

<mat-grid-list id="parentGrid" cols="4" rowHeight="100px">
    <mat-grid-tile colspan="1" rowspan="1">
        <h1>Foo</h1>
    </mat-grid-tile>


    <mat-grid-tile id="table" colspan="3" rowspan="6">
        <table mat-table [dataSource]="someArray">
            <!--- removed for space -->
        </table>
    </mat-grid-tile>
    </mat-grid-list>

I'll have everything aligned to the top left but I just want my table to be in the top left and have tried doing #table and in the table's tile I would have id="table" but this wouldn't work.

Answer 1

Try by replacing the CSS rule given by you with the below one:

.mat-grid-tile > table {
   justify-content: flex-start !important ;
   align-items: flex-start !important;
}