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：

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

更新：如果我只使用/ deep / .mat-figure它可以工作，但只是页面上的所有元素，我只需要3个。示例下来不工作

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

Answer 1

有时您需要将!important添加到自定义样式以覆盖默认的Angular Material的样式，例如（假设示例）：

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

DOM的某些部分是通过Angular Material动态生成的：你没有在HTML模板中编写它们，但是Angular Material将它们放到了DOM中。在这种情况下，你需要在CSS中使用/deep/（有类似物），例如（假的例子）：

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

CSS样式不适用于某些元素

1 个答案: