2017-09-23 2 views
1

J'ai une page web que j'essaye d'ajouter une liste de liens pour qu'ils ressemblent à des onglets. Cela fonctionne pour toutes les pages principales, mais la nouvelle liste de liens que je veux ajouter est dans une section différente.css propriétés héritage pour police-famille ne fonctionne pas comme je l'attendais

La liste de travail est en

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

avec plusieurs sous-divs pour créer les différents onglets & charge.

L'inspection de l'élément montre qu'il obtient la famille de polices de "bannière". Même si je mets la famille de polices dans « tab-tête », il vient encore de « bannière »

La nouvelle liste est dans une autre partie de la page

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

avec plusieurs sous-divs pour créer les différents onglets et remplisseurs.

L'inspection de l'élément montre qu'il obtient la famille de polices de "main a". Encore une fois, mettre police-family dans "tab-header" ou ailleurs ne change rien à cela.

Étant donné que la famille de polices n'est utilisée que pour le texte de lien, j'ai essayé de créer une définition de CSS «tab-header a». Cela remplace la définition de «bannière» dans le premier ensemble d'onglets, mais la seconde provient toujours de «principal a».

Les sections pertinentes sont css:

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

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

je peux obtenir la famille de polices correcte en définissant le style dans le lien lui-même. Je ne peux pas le faire en attribuant le lien d'une classe (à savoir

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

œuvres, mais

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

ne fonctionne pas). Cela se produit à la fois dans Firefox et dans Chromium, il doit donc y avoir quelque chose qui ne va pas dans ma compréhension du fonctionnement de css. J'avais pensé que les valeurs css imbriquées plus profondes remplaceraient les valeurs plus globales.

Quelqu'un peut-il nous éclairer à ce sujet?

Répondre

0

Vous écrivez que cela ne fonctionne pas: <a class="tab-link" Mais la règle CSS que vous avez définie est pour .tab-header a

Tout d'abord - en dehors de ces deux ayant un nom complètement différent - votre sélecteur CSS .tab-header a est pas une classe , mais une combinaison d'une classe et d'une balise, l'élément tag étant un enfant (ou un descendant) de l'élément avec cette classe.

Vous devez définir une classe, comme .my_tabheader1 (non .my_tabheader1 a {..}) avec les paramètres souhaités, et l'appliquer à votre balise a: <a class="my_tabheader1" ... > ...