我正在尝试元素的模板 css 样式。使用棱 Angular Material 。
但是我的 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;
}
最佳答案
有时您需要将 !important 添加到自定义样式中以覆盖默认的 Angular Material 样式，例如(假示例):
md-grid-tile {
background-color: red !important;
}
并且 DOM 的某些部分是通过 Angular Material 动态生成的:您没有将它们写在 HTML 模板中，但是 Angular Material 将它们放到了 DOM 中。在这种情况下，您需要在 CSS 中使用 /deep/(有类似物)，例如(假示例):
/deep/ .md-popup {
/* styles here */
}
关于html - CSS 样式不适用于某些元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46626369/