我正在尝试元素的模板CSS样式。使用角材料。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;
}
我认为/ deep /不适用于Angular 4.3.0。或者我做错了什么。 –
@GerzogTheBat,我使用4.2.6,它工作正常,不知道4.3.0,但我认为,它也应该工作。 –