Question

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

<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

Answer 1

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

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

Answer 2

使用 ：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>

Answer 3

只需为标记提供一个ID，以便可以唯一标识

＆＃13;

#black{
  background-color: black;
  display: block;
}

#brown {
  background-color: brown;
  display: block;
}

＆＃13;

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

＆＃13;

Answer 4

添加到课程。所有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>

Answer 5

您可以使用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>

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

5 个答案: