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/

带链接按钮的CSS标头

1 个答案: