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

Posted 2023-03-29

【中文标题】如何在一个 CSS 类中为按钮设置不同的颜色

【英文标题】：How to set different colors for button in one css class

【发布时间】：2018-04-20 23:11:19

【问题描述】：

这是我的 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

【问题讨论】：

能否提供您的html代码。

你的html总是一样的吗？ （相同的班级和身份证）？还是那些改变了？如果它们没有改变，只需编写更具体的 css 路径，如 .TimeSlotControlBlockButtons .TimeSlotControlBlockButtonDiv #lnkFirstAvailable background-color:grey

【参考方案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>

【讨论】：

它必须工作，检查更新的提琴手。你实际上得到了什么？

这表明我的 css 文件已加载，但按钮仅使用 .TimeSlotControlButton background-color: #AC2430;边框：2px 实心#AC2430；白颜色;高度：29px；填充：0 20px；边距底部：10px； CSS 样式

如果您使用的是 asp.net usercontrols，您的id 将是动态的，并且会在_ 之间添加用户控件名称。因此，右键单击并检查按钮以获取更新的 id 并将其与# 一起使用。

【参考方案2】：

这是基本的 CSS 功能，请仔细阅读。

#lnkFirstAvailable .TimeSlotControlButton  
  /*styles go here!*/

【参考方案3】：

#btnNewCustomer.TimeSlotControlButton
background: red;

#btnCustomerSearch.TimeSlotControlButton
background: green;

通常这应该可以工作。

但我猜你正在使用 webform(.net)。在输入上运行服务器标签，将输入 ID 更改为类似的东西； ctl00_btnNewCustomer**。所以 css 选择不起作用。

通过浏览器检查器了解新的 ID 并用它更改您的 css 选择。

【讨论】：

是的，非常感谢。有帮助！

【参考方案4】：

尝试为您的按钮添加第二个类

        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="lnkFirstAvailable" runat="server" Text="First Available Time" meta:resourcekey="lnkFirstAvailableResource" CssClass="TimeSlotControlButton grey" style="float:left;"/>
            <div style="clear:both;"></div>
        </div>
        <div class="TimeSlotControlBlockButtonDiv">
            <asp:Button ID="btnSummary" runat="server" meta:resourcekey="btnSummaryResource" CssClass="TimeSlotControlButton black" OnClientClick="popupSummary.Show(); return false;" />
        </div>

在你的 CSS 中

.grey
    background:grey;


.black
    background:black;

【参考方案5】：

您似乎在使用 id 属性时遇到了困难，请尝试使用 CSS 的 nth-of-type 伪类，如下所示：

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


.TimeSlotControlBlockButtonDiv:nth-of-type(3) input 
  background-color: grey;


.TimeSlotControlBlockButtonDiv:nth-of-type(4) input 
  background-color: black;

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

【参考方案6】：

使用第 n 个类型（n）

.TimeSlotControlBlockButtons:nth-of-type(3) input 
  background-color: grey;


.TimeSlotControlBlockButtons:nth-of-type(4) input 
 background-color: black;