如何使 header 的一部分与其余部分的颜色不同？

Question

我有一个非常基本的 header，其中包含 2 个 "buttons" 列表；一个在左边，一个在右边。问题是，我希望 "Sign Up" 按钮具有与其余按钮不同的背景颜色（任何颜色）。我在下面有一个示例，下面是我的实际 header，以及我的代码。

我想要的：

我有：

    <!-- html: -->

header {
  min-height: 20px;
}

header a {
  color: #3b4b5d;
  text-decoration: none;
}

section h1 {
  margin: 0;
}


/* TOP NAV CSS */

.top-nav {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.nav-logo img {
  float: left;
  width: 120px;
  padding: 20px 12px 20px 20px;
}

.left-nav ul li {
  margin: 10px 16px 0px 16px;
  padding: 0px 0px 0px 24px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  float: left;
  text-align: center;
}

header a:hover {
  color: #50E3C2;
}

.right-nav ul li {
  margin: 10px 16px 0px 16px;
  padding: 0px 24px 0px 0px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  float: right;
  text-align: center;
}

<header>
  <div class="top-nav">
    <div id="branding">
      <a href="index.html" class="nav-logo"><img src="assets/nav-bar-logo.png" alt="trooops-logo"></a>
    </div>

    <nav class="left-nav">
      <ul>
        <li><a href="discover.html">Discover</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    </nav>

    <div class="right-nav">
      <ul>
        <li><a href="signup.html">Sign Up</a></li>
        <li><a href="login.html">Log In</a></li>
      </ul>
    </div>
  </div>
</header>

Answer 1

类似

.right-nav>ul>li:first-child{
    background-color: #whatever-color
}

fiddle

编辑我修改了 fiddle 并以一些规则为例。我认为你有点乱用填充和边距。按照@Robert 的建议，将规则重新应用于锚点。将 fiddle 作为建议，而不是完整的解决方案。这取决于你 ;)

已编辑 fiddle：newFiddle

Answer 2

为了扩展@sissy 提供的内容，因为您的锚点（标签）是可点击的元素，并且您将其样式设置为按钮，因此将您的颜色分配给该元素是有意义的。使用填充在文本周围留出一些空间。

header {
  min-height: 20px;
}

header a {
  color: #3b4b5d;
  text-decoration: none;
}

section h1 {
  margin: 0;
}


/* TOP NAV CSS */

.top-nav {
  width: 100%;
  margin: auto;
  overflow: hidden;
}

.nav-logo img {
  float: left;
  width: 120px;
  padding: 20px 12px 20px 20px;
}

.left-nav ul li {
  margin: 10px 16px 0px 16px;
  padding: 0px 0px 0px 24px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  float: left;
  text-align: center;
}

header a:hover {
  color: #50E3C2;
}

.right-nav ul li {
  margin: 10px 16px 0px 16px;
  padding: 0px 24px 0px 0px;
  font-size: 16px;
  text-decoration: none;
  display: inline-block;
  float: right;
  text-align: center;
}

.right-nav>ul>li:first-child a {
  background-color: purple;
  color: white;
  padding: 10px 12px;
}

<header>
  <div class="top-nav">
    <div id="branding">
      <a href="index.html" class="nav-logo"><img src="assets/nav-bar-logo.png" alt="trooops-logo"></a>
    </div>

    <nav class="left-nav">
      <ul>
        <li><a href="discover.html">Discover</a></li>
        <li><a href="blog.html">Blog</a></li>
      </ul>
    </nav>

    <div class="right-nav">
      <ul>
        <li><a href="signup.html">Sign Up</a></li>
        <li><a href="login.html">Log In</a></li>
      </ul>
    </div>
  </div>
</header>

Answer 3

css:

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

html:

<a href="#" class="button">Link Button</a>

如何使 header 的一部分与其余部分的颜色不同？

How to make part of header a different colour to the rest?

html

css

web-deployment