带有链接按钮的 CSS 标头

Question

我创建了一个标题 + 一个登录和一个注册按钮。这是我的问题，如果我不在标题类下添加登录和注册按钮，按钮将不会显示。但是，通过在标题类下添加按钮，文本的 css 格式默认为标题 css。我已经尝试了一切让按钮正确浮动并显示在标题类之外，但没有任何效果。

标题类内部的问题 - 文本颜色是 #39C 而不是黑色。在 Chrome 或 Firefox 中，悬停颜色会显示，但文本颜色永远不会变成白色。

标题类之外的问题 - 按钮只是不显示。我认为它与 z-index 有关，但当我尝试进行更改时没有任何效果。

感谢您的帮助！

标题和按钮 CSS

.header { position: absolute; height: 45px; right: 0; top: 0; left: 0; }

.mtstyle { text-align: center; margin-top: 5px; margin-left:15px; }

.mtlstyle a:link, a:visited, a:active { color: #3399CC; }

.mtlstyle a:link, a:visited, a:active { text-decoration: none; }

.tcard { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0,   
   0, 0.19); margin-left: -15px; padding: 15px; }

.btna { padding: 7px 16px; text-align: center; text-decoration: none;  
   display: inline-block; font-size: 12px; margin: -53px 10px 30px; cursor: 
   pointer; float:right; }

.btn1 { /* Login */ background-color: white; color: black; border: 0px solid 
   #000; font-size: 14px }

.btn2 { /* Signup */ background-color: white; border: 3px solid #39C; color:
  black; font-size: 14px; hover-background: gray; }

.btn2:hover { background-color: #39C; color: white; }

这里是 HTML

<!--Title-->
   <div class="header">
   <div class="mtstyle">
   <div class="mtlstyle">
   <div class="tcard">
   <h1><a href="index.php">Page Title</a></h1> 

<!--Login-->
   <a class="btna btn2" href="login.php">Signup</a>
   <a class="btna btn1" href="login.php">Login</a>
     </div>
      </div>
        </div>
          </div>

Answer 1

您的问题是 css 特定规则。 Smashing 杂志有一篇关于规则的好文章：https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/。出于某种原因，它要求登录，但您可以点击取消并仍然到达那里。

如果你想覆盖应用的样式：

.mtlstyle a:link,
.mtlstyle a:visited,
.mtlstyle a:active {
  color: #3399CC;
}

您需要更具体。将选择器更改为

a.btn1:link,
a.btn1:visited,
a.btn1:visited {
  /* Login */
  background-color: white;
  color: black;
  border: 0px solid #000;
  font-size: 14px
}

将使您更加具体，该规则将适用于登录按钮。

https://jsfiddle.net/qg569f35/3/