1

ヘッダーにborder-bottomを付けたいのですが、境界線の色は子フォントの色と同じである必要があります。htmlコードを見つけて、先に進むように提案してください。

<header>
  <div class="cblt-panel">
     <header>
          <a href="HomePage;jsessionid=9Z1DRLtK8FfgmVDhysv4fk8LKjj1rTpSpJcS99dvcbffT4KTZ9tN!91184445">
             <div class="header-wrapper header"> 
                <h1 class="dealer-name">Airport Chevrolet Cadillac</h1>
             </div>
          </a>

     </header>

   </div>
</header>

上記のマークアップでは、外側のヘッダータグのborder-bottom-colorを子h1タグのフォントの色と同じに設定したいと思います。出来ますか ？

4

4 に答える 4

2

純粋な CSS では実現できないと思います。jQuery を使用できる場合は、非常に簡単です。

var h1Color = $('.dealer-name').css('color');
$('header:eq(0)').css('border-bottom-color', h1Color);

デモ: http://jsfiddle.net/S9svs/

于 2013-03-22T06:05:08.720 に答える
1

いいえ、それは不可能です。CSS では、親が子から継承することはありません。

要素の境界線の色をそれ自体のコンテンツの色 (テキストの色) と同じにすることができます。つまり、境界線の色をまったく設定しません。ただし、子でカラー セットを使用するには、JavaScript が必要です。

より良い戦略は、設定を組み合わせて、見出し要素の色とそれを囲む要素の色を同じ値に設定することです。ただし、これらの設定は別のルールで行う必要がありますheader { border-color: #060; } h1 { color: #060; }。

于 2013-03-22T06:06:08.957 に答える
0

面白いことにborder-color、設定されていない場合、colorプロパティを使用して色を定義するため、場合によっては反対のことができる場合があります。例えば：

header {
    color:red;
    border-bottom: 2px solid;
}

header a,header h1 {
    color:inherit;
}

デモ: http://jsfiddle.net/brTTT/

デモでは、ホバーして、header colorプロパティを変更するだけで色が変わることを確認します。

于 2013-03-22T07:48:16.227 に答える
0

確かに動的に実行したい場合は、css プリプロセッサ言語を使用する必要があります...

ライクレスCSS

ここでは、css を動的に定義し、javascript のように使用します...

例えば、

@color:#000;
header { border-bottom-color:@color; }
header h1 { color:@color; }
于 2013-03-22T06:12:21.390 に答える