liste style articles dans une certaine div

j'ai une structure div comme le fond:liste style articles dans une certaine div

<div class="body-content"> 
    <div class="col-middle"> 

    </div> 
</div>

Ce que je veux faire est de définir un style sur les éléments de liste dans la classe du corps contenu et assurez-vous qu'il ne le fait pas appliquer à quoi que ce soit dans les col-milieu

Je pensais que ce serait quelque chose comme ...

.body-content li { }

mais il applique ces styles à la liste des articles dans col-milieu aussi.

Source

2009-10-06 Brad

L'option la plus simple et la plus rétrocompatible est:

div.body-content li { /* some style */ } 
div.col-middle li { /* some other style */ }

Vous pourriez être en mesure pour utiliser le sélecteur d'enfant:

div.body-content > ul li

mais cela n'est pas pris en charge dans IE6. A part cela, cela dépend de la manière exacte dont votre balisage est écrit et de vos besoins en termes de support du navigateur.

Si possible, modifiez votre balisage à:

<div class="body-content"> 
    <div class="col-middle"> 
    ... 
    </div> 
    <div class="col-other"> 
    ... 
    </div> 
</div>

ou quelque chose de similaire afin que vous puissiez facilement distinguer entre lesquels la liste que vous voulez style.

Source

2009-10-06 14:15:41 cletus

Vous devez:

.body-content > ul li { ... }

Cela ne sélectionner les éléments de la liste qui sont les descendants directs d'un ul dans .body-content.

Modifier: Oups, mauvais endroit pour le>!

Editer: Désolé, aussi aurait dû mentionner - les sélecteurs d'enfants ne fonctionnent pas dans IE6.

Source

2009-10-06 14:14:39

"les sélecteurs d'enfants ne fonctionnent pas dans IE6" - ni internet non plus. –

Haha avec vous sur celui-là ... :) –

Je puis zéro le .col-milieu li {} s APRÈS coiffage des .Body contenu li {} .Body contenu

Votre seule autre option est de spécifier où le li va être:

.body-content .li-block li { }

Source

2009-10-06 14:14:40 Jakub

Peu importe si c'est après que c'est plus spécifique. –

Restyle le milieu-col.

div.body-content li { 
    color: red; 
} 

div.col-middle li { 
    // overrides stuff 
    color: black; 
}

Les styles tombent en cascade des éléments parents vers leurs enfants.

Source

2009-10-06 14:15:04

Vous devez utiliser, ce qui mettra le style que pour les fils de li .Body contenu

.body-content > ul li {}

Source

2009-10-06 14:15:28 yogsototh

Le code que vous avez essayé spécifie comment les éléments de liste SEULEMENT dans .body-content devraient apparaître, même s'ils se trouvent à l'intérieur de .col-middle. En utilisant CSS2, il n'y a aucun moyen de faire ce que vous voulez, sans spécifier comment les éléments de la liste en dehors de .col-middle devraient fonctionner, et en spécifiant comment ils doivent être stylés dans .col-middle.

En utilisant CSS3 cependant, vous pouvez faire quelque chose comme ceci:

:not(.col-middle) li{}

Notez que cela ne fonctionne pas dans tous les navigateurs IE.

Source

2009-10-06 14:18:01 Marius

L'exemple ci-dessous semble fonctionner le mieux (j'ai ajouté un balisage supplémentaire pour le démontrer), mais je recommanderais de styler .body-content, puis remplacer ces styles dans .col-middle. Ce serait le plus compatible avec tous les navigateurs.

<!DOCTYPE html> 

<html> 
<head> 
<title></title> 
<style type="text/css"> 
.body-content > *:not(.col-middle) li { 
    color: red; 
} 
</style> 
</head> 
<body> 

<div class="body-content"> 
    <div class="col-middle"> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
    </ul> 
    </div> 

    <div> 
    <ul> 
     <li>item 1</li> 
     <li>item 2</li> 
    </ul> 
    </div> 

    <ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    </ul> 
</div> 

</body> 
</html>

Source

2009-10-06 14:30:17

liste style articles dans une certaine div

Répondre

Questions connexes