ネストされたdiv内のリンクのスタイルをオーバーライド

ネストされたdivのリンクの色を設定する際に問題があります。リンクは、親div要素のリンクのデフォルトのスタイルで表示されます。一言で言えばネストされたdiv内のリンクのスタイルをオーバーライド

、我々はHTMLコードを次しているとしましょう：

<body> 
    <div id="message"> 
     <div class="wrap"> 
      <a href="...">Link 1</a> 
      <a href="...">Link 2</a> 
      <div class="website"> 
       <div class="website-button"> 
        <a href="...">Link 3</a> 
        <a href="...">Link 4</a> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

私が使用#message/wrapコンテナ内Link 1とLink 2要素のスタイルに：

 #message a:link { color: rgba(85, 165, 255, 1.0); } 
     #message a:visited { color: rgba(85, 165, 255, 1.0); } 
     #message a:hover { color: rgba(95, 185, 255, 1.0); } 
     #message a:active { color: rgba(95, 185, 255, 1.0); }

をまた、私はLink 3を必要としますLink 4のリンクは白色になります。私はこれらのリンクをこのようにスタイリングしています：

 .website-button a:link, 
     .website-button a:visited, 
     .website-button a:hover, 
     .website-button a:active { 
      color: #ffffff; 
     }

問題は、私は.website-button要素内のリンクのスタイルを上書きすることはできませんです。彼らは私が何をしても青いままです。以下は

私のページからの抜粋です：

<html> 
<head> 
    <style> 
      a { text-decoration: none; } 
      a:hover { text-decoration: underline; } 
      .wrap { 
       max-width: 800px; 
       margin: 32px auto; 
       padding: 0 24px; 
      } 
      #message { 
       overflow: hidden; 
       background: rgba(62, 72, 119, 1.0); 
       color: rgba(255, 255, 255, 1.0); 
      } 
      #message a:link { color: rgba(85, 165, 255, 1.0); } 
      #message a:visited { color: rgba(85, 165, 255, 1.0); } 
      #message a:hover { color: rgba(95, 185, 255, 1.0); } 
      #message a:active { color: rgba(95, 185, 255, 1.0); } 
      .website { 
       width: 100%; height: auto; 
       margin: 0.6rem 0 1.6rem 0; 
      } 
      .website-button { 
       width: 50%; 
       height: auto; 
       margin: 0 auto; 
       padding: 12px 18px; 
       background: #f50; 
       font-size: 1.8rem; 
       line-height: 2.0rem; 
       text-transform: none; 
       text-align: center; 
       font-weight: 700; 
      } 
      .website-button a:link, 
      .website-button a:visited, 
      .website-button a:hover, 
      .website-button a:active { 
       color: #ffffff; 
      } 
     </style> 
</head> 
<body> 
    <div id="message"> 
    <div class="wrap"> 
     <h3>Hello!</h3> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <h3>Twitter: <a href="https://twitter.com/zimnovich">ZimNovich</a></h3> 
     <div class="website"> 
     <div class="website-button"><a href="https://soundcloud.com/zimnovich/mobirrel-radio-edit">Listen it on SoundCloud</a></div> 
     </div> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <h3>Instagram: <a href="https://instagram.com/zimnovich">ZimNovich</a></h3> 
    </div> 
    </div> 
</body> 
</html>

http://codepen.io/anon/pen/evrgay

出典

2017-03-22 ezpresso

は '！important'は機能しませんか？ – Siraj

@Siraj、はい、それは働いています、ありがとう！ – ezpresso

それは私の答えが受け入れられた答えとしてマークされるべきであるということですか？ – Siraj

問題が#messageで始まるあなたのセレクタであることがあるのはなぜ.website-button

で始まるセレクタよりも高い優先度を持っています？さて、各セレクターには重み付けまたは優先度が与えられます。 1クラスに行くと、セレクタの1つの要素が本質的に（0,0,1,1）というスコアが表示されます。 1 idと1要素（#messageセレクタ）を使うとスコアは（0,1,0,1）になります。

スコアが高いセレクタが使用されます。

.website-buttonセレクタをid #messageから始めるように変更すると、（0,1,1,1）というスコアが与えられ、代わりに使用されます。

ここでは、CSSセレクタを書くときに頭の中で頭に浮かぶ頭に浮かぶ頭字語です。

ICE

（I） - インラインスタイル
I - ID
C - クラス
E - 要素

セレクタ内の各IDは（0,1,0,0）の価値があり、各クラスは価値があり（0,0,1,0）、各要素は（0,0,0,1）です。それぞれのバケットが前のバケットより優先される場所。

に注意することが重要

： 1クラスは10個の要素よりも強い、と1つのidが強くより10クラス

ある - >http://vanseodesign.com/css/css-specificity-inheritance-cascaade/

出典

2017-03-22 22:10:03

偉大な答えは、ありがとう！しかし、 '.website-button'クラスを他のid（'＃message'以外のもの）とdiv内でネストされるdivで使用したいのですが？ – ezpresso

次に、より強力なセレクターが必要です。あなたのHTMLにはあなたを助けることができるIDが必要です。システムが複雑になるにつれて、強力なルールをクリアするのが難しくなるため、セレクタのスコアを念頭に置いてください。あなたのルールが本質的に弱くて易いように、ID以上のクラスを使用してください。 –

頭字語が大好きですが、ポイントの部分が正しくありません。別のセレクタがより多くのIDを持っているなら、どんな数のクラスも常に失われます。それ以外は偉大な答えです！ – tsmith18256

この #message .website-button a:link, #message .website-button a:visited, #message .website-button a:hover, #message .website-button a:active { color: #ffffff; }

出典

2017-03-22 22:10:25 gabesoft

http://codepen.io/anon/pen/WpJpQpをお試しください

！を追加してください！次の最後に重要です！添付のコードペンも参照してください。

.website-button a:link, 
     .website-button a:visited, 
     .website-button a:hover, 
     .website-button a:active { 
      color: #ffffff !important; 
     }

出典

2017-03-22 22:12:59

あなたは

<div id="myWrap"> 
    <div class="website"> 
     <div class="website-button"> 
      <a href="...">Link 3</a> 
      <a href="...">Link 4</a> 
     </div> 
    </div> 
</div>

を以下のように "ウェブサイト" クラスのdiv要素をラップし、このようなスタイルを使用することができます：ちょうど重要として、ネストされたリンクのCSSをマーク

#myWrapper a:link { 
    color: rgba(85, 165, 255, 1.0); 
} 

#myWrapper a:visited { 
    color: rgba(85, 165, 255, 1.0); 
} 

#myWrapper a:hover { 
    color: rgba(95, 185, 255, 1.0); 
} 

#myWrapper a:active { 
    color: #fff; 
}

出典

2017-03-22 22:24:00

。

.website-button a:link, 
    .website-button a:visited, 
    .website-button a:hover, 
    .website-button a:active { 
     color: #ffffff !important; 
    }

出典

2017-03-23 15:07:19 Siraj

ネストされたdiv内のリンクのスタイルをオーバーライド

答えて

関連する問題