Question

我有一个非常基本的标题，有2个＆＃34;按钮列表＆＃34 ;;一个在左边，一个在右边。问题是，我想要＆＃34;注册＆＃34;按钮与其余颜色（任何颜色）具有不同的背景颜色。我在下面有一个示例，下面是我的实际标题，以及我的代码。

我想要的是什么：

我有什么：

    <!-- html: -->

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

像

这样的东西

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

fiddle

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

编辑小提琴：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>

如何使标题的一部分与其他标题不同？

3 个答案: