2017-09-23 6 views
1

タブのように見えるようにリンクリストを追加しようとしているウェブページがあります。これはすべてのメインページで機能しますが、追加したい新しいリンクリストは別のセクションにあります。font-familyのCSSプロパティ継承が期待通りに機能していない

作業リストは、様々なタブ&フィラーを作成するために、いくつかのサブのdivと

<body class="shadowbox"> 
    <div class="full"> 
    <div class="banner"> 
    <div class="tab-header"> 

です。

要素を調べると、 "banner"からfont-familyが取得されていることがわかります。私は、「タブ・ヘッダー」でフォントファミリを入れたとしても、それはまだ「バナー」

新しいリストを作成するには、いくつかのサブのdivのページ

<body class="shadowbox"> 
<div class="full"> 
    <div class="main"> 
    <div class="centre"> 
    <div class="about shadowbox"> 
    <div class="tab-header"> 

の別の部分であるから来ていますさまざまなタブとフィラー。

要素を調べると、 "main a"からfont-familyが取得されていることがわかります。フォントファミリを「タブヘッダ」や他の場所に置いても、それは変わりません。

font-familyはリンクテキストにのみ使用されているので、「tab-header a」というCSS定義を作成しようとしました。これは、最初のタブセットの "バナー"定義を置き換えますが、2番目のタブは "メインa"からのものです。

関連するCSSのセクションは次のとおりです。

.main a { 
    font-family: serif; 
    color: rgb(36,64,143); 
    padding-left: 5px; 
    padding-right: 5px; 
} 

.tab-header a { 
    font-family: sans-serif; 
}  

私はリンク自体にスタイルを設定することで、正しいフォントファミリを取得することができます。私はリンククラス(すなわち

<a style="font-family: sans-serif" ... 

作品が、

<a class="tab-link" ... 

にはない)を割り当てることによって、それを行うことはできません。

これはFirefoxとChromiumの両方で発生するので、cssの仕組みを理解する上で何か間違いがあります。私はより深い入れ子にされたCSS値がよりグローバルなものに取って代わると思っていました。

誰もがこれにいくつかの光を当てることができますか?

答えて

0

あなたはこれが動作しないことを書く:すべての<a class="tab-link"しかし、あなたが定義したCSSルールは.tab-header a

ためである第一 - 離れてこれら二つの完全に異なる名前を持つ - あなたのCSSセレクタ.tab-header aはクラスではありませんクラスとタグの組み合わせであり、タグ要素はそのクラスの要素の子(または子孫)である。

ですから、必要な設定と.my_tabheader1(ない.my_tabheader1 a {..})のように、クラスを定義し、あなたのaタグにそれを適用する必要があります。<a class="my_tabheader1" ... > ...

関連する問題