如何使两个按钮的颜色不同

Posted 2023-03-06

【中文标题】如何使两个按钮的颜色不同

【英文标题】：How do I make both buttons different colors

【发布时间】：2018-08-23 01:35:39

【问题描述】：

我也想让两个按钮的颜色不同

<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

这是我使用的代码，但如果我改变颜色，两个按钮都会改变，而不是 1。

What it is now

what I want

【问题讨论】：

在你问什么之前自己研究一下怎么样？？？只需为颜色使用一个额外的类...

这几乎是每个使用 css 的人都应该具备的一些基本知识。添加一个类，让我们对您的一个按钮说“棕色”。然后像这样设置类 brown 的样式：“.brown background: brown

我同意你们两个，但我还是发布了答案。 @youarewelcomeee 也可以在您的问题中包含 CSS 代码！

【参考方案1】：

使用 :nth-of-type(2) 选择第二个 btn，您可以更改任何您想要的 css 属性。

.intro-text .btn 
  background: #333;


.intro-text .btn:nth-of-type(2) 
  background: white;
  color: black;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

【讨论】：

我认为:nth-of-type(2) 对于提出此类问题的人来说太复杂了。但是，是的。 :)

可能比较复杂，但绝对比内联样式或多添加一个类名要好。 :)

【参考方案2】：

添加到类。所有a 标签的一位将军。还有一个:first-of-type

.intro-text a:first-of-type
  background-color: red;
  color: white;
  display: block;


.intro-text a 
  background-color: blue;
  color: white;
  display: block;

<header class="masthead">
  <div class="container">
    <div class="intro-text">
      <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
      <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
      <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
    </div>
  </div>
</header>

【参考方案3】：

您可以使用Bootstrap buttons 中提供的这些类，如下例所示，或创建您自己的类。

<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-default btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-warning btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

【参考方案4】：

您可以内联样式来更改特定按钮的背景

.btn 
    display: inline-block;
    border: 2px solid transparent;
    letter-spacing: .5px;
    line-height: inherit;
    border-radius: 0;
    text-transform: uppercase;
    width: auto;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;


.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover 
    color: #fff;
    background-color: #204d74;
    border-color: #122b40;


.btn-primary
    color: #fff;
    background-color: #286090;
    padding: 10px; 5px;

<header class="masthead">
      <div class="container">
        <div class="intro-text">
          <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" style="background:#ccc;"href="#services">Werkzaamheden</a>
        </div>
      </div>
</header>

【参考方案5】：

只需给标签一个ID，这样它就可以被唯一标识

#black
  background-color: black;
  display: block;


#brown 
  background-color: brown;
  display: block;

  <header class="masthead">
 <div class="container">
<div class="intro-text">
      <div class="intro-lead-in">Jeroen Hooge schilderwerken</div>
      <a id="black" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Prijs</a>
      <a id="brown" class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#services">Werkzaamheden</a>
    </div>
  </div>
</header>
`