帶鏈接按鈕的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 specificty規則。 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/