HTML CSS基础

    CSS 控制 <ul>中<li>选中与不选中的样式。

<ul class="heroes">

              <li *ngFor="let hero of heroes"

                [class.selected]="hero === selectedHero"

                (click)="onSelect(hero)">

                <span class="badge">{{hero.id}}</span> {{hero.name}}

              </li>

            </ul>

.selected {

    background-color: #CFD8DC !important;

    color: white;

  }

其中selectedHero用来记录选中的li， （selectedHero的赋值在onSelect事件中）