CSS樣式不適用於某些元素

Question

我正在嘗試元素的模板CSS樣式。使用角材料。

但我的CSS的某些元素不適用。如果我直接將它插入到html頁面，它確實像往常一樣工作。我使用chrome進行測試。我正在嘗試將文本與flex-start對齊，但出現問題。我認爲這是從index.html - .mat-grid-tile .mat-figure中取得樣式的。我需要將所有文本（md-card-title，md-card-subtitle，md-card-content）對齊到flex-start。然後我運行代碼片段所有的作品，但是在我的項目中它沒有工作。 有些人可以回答我做錯了什麼嗎？

的index.html：

​​

md-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    width: 500px; 
 
    margin-top: 25px; 
 
    margin-bottom: 25px; 
 
} 
 

 
md-card-title { 
 
    font-size: 32px; 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 

 
md-card-subtitle { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 

 
md-card-content { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 

 
md-grid-tile { 
 
    display: flex; 
 
    align-items: flex-start; 
 
    justify-content: flex-start; 
 
} 
 

 

 
h1 { 
 
    color: #673ab7; 
 
    text-align:center; 
 
    margin: 1em 0 0.5em 0; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
    font-style: italic; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    font-size: 58px; 
 
    line-height: 54px; 
 
    text-shadow: 2px 5px 0 rgba(0,0,0,0.2); 
 
} 
 

 
a { 
 
    font-size: 24px; 
 
    text-decoration: none; 
 
    color: #673ab7; 
 
} 
 

 
.price-content{ 
 
    font-size: 18px; 
 
    background: #00bd0d; 
 
    float: left; 
 
    height: 22px; 
 
    line-height: 22px; 
 
    padding: 0px 9px 0px 9px; 
 
    color: #ffffff; 
 
    margin-bottom: 8px; 
 
}

<h1>All goods</h1> 
 
<md-card> 
 
    <md-grid-list cols="3" rowHeight="3:1"> 
 
     <md-grid-tile [colspan]="1" [rowspan]="3"> 
 
      <img md-card-image src='./assets/image/001.jpeg' alt='picture'> 
 
     </md-grid-tile> 
 
     <md-grid-tile [colspan]="2" [rowspan]="1"> 
 
      <md-card-title><a [routerLink]='["/goods"]'>Audi A8</a></md-card-title> 
 
     </md-grid-tile> 
 
     <md-grid-tile [colspan]="2" [rowspan]="1"> 
 
      <md-card-subtitle>Description Description Description Description Description Description Description Description Description</md-card-subtitle> 
 
     </md-grid-tile> 
 
     <md-grid-tile [colspan]="2" [rowspan]="1"> 
 
      <md-card-content class="price-content">50000 $</md-card-content> 
 
     </md-grid-tile> 
 
    </md-grid-list> 
 
</md-card>

更新：如果我只使用/深/ .MAT位數它的工作原理，但只是網頁上的所有元素，我需要只有3人。例如下不要工作

/deep/ .mat-figure .mat-card-title { 
    display: flex; 
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
} 

Answer 1

有時你需要添加!important到您的自定義樣式覆蓋默認的角度材質的款式，例如（假的例子）：

md-grid-tile { 
    background-color: red !important; 
} 

和DOM的某些部分動態生成通過Angular Material：你沒有在HTML模板中編寫它們，但是Angular Material把它們放到了DOM中。在這種情況下，您需要在CSS中使用/deep/（具有類似物），例如（假示例）：

/deep/ .md-popup { 
    /* styles here */ 
}