html - 如何在一个CSS类中为按钮设置不同的颜色

Question

这是我的 html 代码。我们在一个 div 中有 4 个按钮，所有按钮都有“TimeslotControlButton”CSS 类。

       <div class="TimeSlotControlBlockButtons">
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="btnNewCustomer" runat="server" Text="New Customer" meta:resourcekey="btnNewCustomerResource" CssClass="TimeSlotControlButton" onclick="btnNewCustomer_Click"  />
        </div>
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="btnCustomerSearch" runat="server" Text="Customer Search" meta:resourcekey="btnCustomerSearchResource" CssClass="TimeSlotControlButton"/>
        </div>
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="lnkFirstAvailable" runat="server" Text="First Available Time" meta:resourcekey="lnkFirstAvailableResource" CssClass="TimeSlotControlButton" style="float:left;"/>
            <div style="clear:both;"></div>
        </div>
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="btnSummary" runat="server" meta:resourcekey="btnSummaryResource" CssClass="TimeSlotControlButton" OnClientClick="popupSummary.Show(); return false;" />
        </div>
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="lnkPreviousStep" runat="server" Text="Previous 
       Step" meta:resourcekey="lnkPreviousStepResource"  
       CssClass="TimeSlotControlButton" onclick="lnkPreviousStep_Click" />
        </div>
        <div style="clear:both;"></div>
    </div>

and this is my css class:

        .TimeSlotControlButton {
            background-color: #AC2430;
            border: 2px solid #AC2430;
            color: white;
            height: 29px;
            padding: 0 20px;
        }

所以我需要将 ID="lnkFirstAvailable"按钮的按钮背景更改为灰色。并将 ID="btnSummary"的按钮设置为黑色。但我不能更改 html 文件，只能更改 css

Answer 1

使用简单的 css ID 选择器设置 background-color 如下所示

#lnkFirstAvailable{
  background-color: grey;
}

或者更具体地使用 id-class 组合，如下所示

#lnkFirstAvailable.TimeSlotControlButton{
   background-color: grey;
}

.TimeSlotControlButton {
  background-color: #AC2430;
  border: 2px solid #AC2430;
  color: white;
  height: 29px;
  padding: 0 20px;
  margin-bottom: 10px;
}

#btnNewCustomer {
  background-color: grey;
}

<div class="TimeSlotControlBlockButtons">
  <div class="TimeSlotControlBlockButtonDiv">
    <input type="button" id="btnNewCustomer" value="First Button" class="TimeSlotControlButton">
  </div>
  <div class="TimeSlotControlBlockButtonDiv">
    <input type="button" id="btnCustomerSearch" value="First Button" class="TimeSlotControlButton">
  </div>
  <div class="TimeSlotControlBlockButtonDiv">
    <input type="button" id="lnkFirstAvailable" value="First Button" class="TimeSlotControlButton">

    <div style="clear:both;"></div>
  </div>
  <div class="TimeSlotControlBlockButtonDiv">
    <input type="button" id="btnSummary" value="First Button" class="TimeSlotControlButton">
  </div>
  <div class="TimeSlotControlBlockButtonDiv">
    <input type="button" id="lnkPreviousStep" value="First Button" class="TimeSlotControlButton">
  </div>
  <div style="clear:both;"></div>
</div>