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

我有一个非常基本的标题，有两个“按钮”列表；一个在左边，一个在右边。问题是，我希望“注册”按钮的背景颜色与其他按钮（任何颜色）不同。下面是一个示例，下面是我的实际标题，还有我的代码

我想要的是：

我所拥有的：

类似

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

编辑 我修改了小提琴，并以一些规则为例。我觉得你在胡乱摆弄填充和边距。按照@Robert的建议，对锚重新应用规则。把小提琴当作建议，而不是完整的解决方案。这取决于你；）

---

编辑的小提琴：

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

标题{
最小高度：20px；
}
标题a{
颜色：#3b4b5d；
文字装饰：无；
}
第h1节{
保证金：0；
}
/*顶部导航CSS*/
.顶部导航{
宽度：100%；
保证金：自动；
溢出：隐藏；
}
.导航标志img{
浮动：左；
宽度：120px；
填充：20px 12px 20px 20px；
}
.左导航ul li{
利润率：10px 16px 0px 16px；
填充：0px 0px 0px 24px；
字体大小：16px；
文字装饰：无；
显示：内联块；
浮动：左；
文本对齐：居中；
}
标题a：悬停{
颜色：#50E3C2；
}
.右导航ul li{
利润率：10px 16px 0px 16px；
填充：0px 24px 0px 0px；
字体大小：16px；
文字装饰：无；
显示：内联块；
浮动：对；
文本对齐：居中；
}
.右导航>ul>李：第一个孩子a{
背景颜色：紫色；
颜色：白色；
填充：10px 12px；
}

css：

html:

我会将背景色分配给列表项中的锚点，而不是列表项本身。这很好，但它只会为文本所在的区域添加背景色。这并没有填满收割台的高度。想象一下，在注册文本的精确大小周围有一个小框。简单一点-在“注册”按钮中添加一个类，并用CSS设置背景色。请提供一个示例？这将是一个巨大的帮助。

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

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

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