CSS-Stil gilt nicht für einige Elemente

Ich habe versucht, eine Vorlage CSS-Stil für Elemente. Verwenden von eckigem Material.CSS-Stil gilt nicht für einige Elemente

Aber das einige Element meines CSS trifft nicht zu. Wenn ich es direkt in HTML-Seite einfüge, funktioniert es wie gewohnt. Ich verwende Chrom zum Testen. Ich versuche Text an Flex-Start anzupassen, aber etwas läuft schief. Ich denke, dass nehmen Sie den Stil aus index.html - .mat-grid-tile .mat-figure. Ich muss den gesamten Text (MD-Karten-Titel, MD-Karte-Untertitel, MD-Karteninhalt) an den Flex-Start ausrichten. Kann jemand antworten, was ich falsch mache?

index.html:

<!doctype html> 
<html lang='en'> 
<head> 
    <meta charset='utf-8'> 
    <title>AdsBoard</title> 
    <base href='./'> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
</head> 
<body> 
    <div class="loading-app"> 
    <img src="assets/image/loading.gif"/> 
    </div> 
</body> 
</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>

UPDATE: Wenn ich nur/tief verwenden/.mat-Figur es funktioniert, aber nur für alle Elemente auf Seite, ich brauche nur für 3 von ihnen. Beispiel unten Dont

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

Quelle

2017-10-08 Gerzog The Bat

Manchmal arbeiten Sie !important Ihr benutzerdefiniertes Design hinzufügen müssen Standardscharfkantiges Material Styles außer Kraft zu setzen, zum Beispiel (fake Beispiel):

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

und einige Teile von DOM generiert dynamisch über Angular Material: Sie haben sie nicht in HTML-Templates geschrieben, aber Angular Material hat sie in das DOM geschrieben. In diesem Fall müssen Sie /deep/ (hat Analoga) in CSS verwenden, zum Beispiel (fake Beispiel):

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

Quelle

2017-10-08 00:26:14

Ich denke,/tief/ist nicht auf Angular 4.3.0 arbeiten. Oder ich mache etwas falsch. –

@GerzogTheBat, verwende ich 4.2.6 und es funktioniert gut, nicht sicher über 4.3.0, aber ich denke, es sollte auch funktionieren. –

CSS-Stil gilt nicht für einige Elemente

Antwort

Verwandte Themen