Comment changer le style CSS des éléments de la liste imbriquée?

Question

J'ai un style pour le style <a> éléments dans les éléments de la liste dans un conteneur #navigation. Cela fonctionne bien.

#navigation li a { 
    text-decoration:none; 
    background:#bfe5ff; 
    color:#045e9f; 
    width:125px; 
    height:35px; 
    padding-top:11px; 
    display:block; 
    float:left; 
    margin-left:2px; 
    text-align:center; 
    font-size:18px; 
    font-weight:bold; 
} 

Maintenant, dans certains <li> s Je suis <div> s INSERTION DE. Dans ceux-ci j'utilise à nouveau une liste encore, mais elle devrait être différente dans le style ou n'a aucun style.

Lorsque je mets <li> s, leur style correspond aux éléments externes <li>, mais il ne devrait pas.

Je suis en train d'utiliser ceci:

#newnavigation li a { 
    font-size:12px; 
    margin-left:20px; 
} 

mais il ne fonctionne pas - il applique les styles « extérieurs ».

Ceci est mon balisage:

<ul id="navigation"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li class="browse"> 
    <a href="#">Browse</a> 
    <div id="browsecontainer"> 
     <h3>Browse By Category</h3> 
     <li><a href="#"></a></li> 
    </div> 
    </li> 
</ul> 

Answer 1

Il continuera d'appliquer les styles extérieurs - c'est le « C » en CSS, en cascade. Vos nouveaux styles sont repris correctement, mais si je lis bien la question, vous essayez d'éliminer les autres styles "hérités" comme la couleur de fond?

Si vous souhaitez que les styles externes ne soient pas appliqués, vous devez utiliser un élément qui ne correspond pas au motif extérieur (par exemple,pas un li, pas pratique ici), ou pour remplacer les styles que vous ne voulez pas appliquer. Si vous voulez vraiment que ces styles soient appliqués à l'ensemble externe des éléments li, alors considérez comme une alternative en utilisant une classe CSS sur les éléments li externes et en appliquant la mise en forme dont vous ne voulez pas hérité directement à cette classe.

Answer 2

Je devine que c'est quelque chose comme ça? J'ai copié et collé vos styles et ça fonctionne très bien. Qu'est-ce qui ne fonctionne pas exactement?

Mise à jour:

Je pense était pas tout à fait raison. Dans le code que vous montrez il n'y a pas id = "newnavigation" pour correspondre au sélecteur #newnavigation css.

Answer 3

Votre css ciblez le #id newnavigation mais votre ul #id est la navigation Effectuez les opérations suivantes:

<ul id="navigation"> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact</a></li> 
    <li class="browse"> 
    <a href="#">Browse</a> 
    <div id="browsecontainer"> 
     <h3>Browse By Category</h3> 
     <ul id="newnavigation"> 
      <li><a href="#">First category</a></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

Answer 4

Pour sélectionner les-éléments internes, nid juste les:

/** Matches outer *AND* inner LIs */ 
#navigation li { 
} 

/** Matches inner LIs only (li within li within #navigation) */ 
#navigation li li { 
} 

Ou , pour correspondre aux ancres:

#navigation li a {} 
#navigation li li a {} 

Dans les styles intérieurs, vous allez commencer par tyleset hérité des styles externes, vous pouvez donc vouloir annuler certains paramètres en les remplaçant pour répondre à vos besoins.

Answer 5

Notez que votre balisage n'est pas valide Pour insérer les nouveaux éléments que vous devez également insérer de nouvelles listes, à savoir:

<ul id="newnavigation> 
    <li> 
    <div> 
     <ul> 
     <li></li> 
     </ul> 
    </div> 
    </li> 
</ul> 

Il est toujours une bonne chose à validate your markup quand vous avez des problèmes avec votre style, Javascript, etc.

Cela dit, pour correspondre uniquement LIs interne, la règle CSS dont vous avez besoin est:

#newnavigation li ul li{ 
    // stuff here 
} 

Answer 6

Vous pouvez également utiliser un sélecteur d'enfant comme: #navigation> li

Alors que la li extérieure est de style. Notez que IE6 et les versions suivantes ne prennent pas en charge les sélecteurs enfants.