リンクボタン付きCSSヘッダー

Question

ヘッダー+ログインとサインアップボタンを作成しました。ここで私の問題は、私は、ヘッダークラ​​スの下にログインとサインアップボタンを追加しない場合、ボタンが表示されません。ただし、ヘッダークラ​​スの下にボタンを追加すると、テキストのCSSの書式設定がヘッダーcssにデフォルト設定されます。私は、ヘッダークラ​​スの外に表示され、右にフロートするボタンを得るためにすべてを試みたが、何も動作していません。

内部での問題 - テキストの色は黒ではなく＃39Cです。 ChromeまたはFirefoxでは、ホバーカラーが表示されますが、テキストの色は白に変わらないことがあります。

外部の問題 - ボタンは表示されません。私はそれがZ-インデックスと関係があると思ったが、変更しようとしたときには何も働かなかった。

ありがとうございました！ここで

ヘッダーとボタンの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; } 

はあなたの問題は、CSSのspecifictyルールである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

です。 Smashing magazineは規則に関する良い記事を持っています：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/