Я пытаюсь изменить цвет фона и цвет "выбранного" класса из home.component.html, но он ничего не делает.
<head>
<title>Home</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<h2>Users</h2>
<div class="content">
<ul class="users">
<li *ngFor="let user of users" (click)="dataService.onSelect(user)" [class.selected]="user === dataService.selectedUser">
<span class="badge">{{user.id}}</span> {{user.firstName}} {{user.lastName}}
</li>
</ul>
</div>
</body>
Класс, который я хочу изменить в home.component.css, «выбран».Я также попытался поместить только ".selected" и идентификатор вместо класса, но все равно это не работает.
.content{
margin-left: 5%;
display: flex;
flex-flow: row wrap;
}
h2{
margin-top: 3%;
margin-left: 5%;
}
.users {
margin-top: 2em;
list-style-type: none;
padding: 0;
width: 20%;
}
.users li {
cursor: pointer;
position: relative;
left: 0;
background-color: rgb(238,238,238);
margin-bottom: 0.5em;
padding: .3em 0;
height: 2.2em;
border-radius: 4px;
}
.users li:hover {
color: rgb(19, 27, 97);
background-color: rgb(221,221,221);
left: .1em;
}
.users .text {
position: relative;
top: -3px;
}
.users .badge {
display: inline-block;
font-size: small;
color: black;
padding: 0.8em 0.7em 0 0.7em;
background-color: rgb(184, 218, 255);
line-height: 1em;
position: relative;
left: -1px;
top: -4px;
height: 2.6em;
margin-right: .8em;
border-radius: 4px 0 0 4px;
}
/* This is the class */
.users li.selected {
background-color: rgb(16, 60, 78) !important;
color: white;
}
Я могу применить CSS в вышеуказанных классах!
PS Я добавил загрузчик в файл styles.css, и я думаю, что этопричина, но я не могу удалить загрузчик, потому что у меня есть другие элементы, которые его используют.