Question

我尝试从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”和id而不是class，但是仍然无法正常工作。

.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！

P.S。我在styles.css文件中添加了bootstrap，我认为这是原因，但是我无法删除bootstrap，因为我还有其他使用它的元素。

无法将样式应用于CSS中的类

0 个答案: