Le Style des éléments de liste dans une certaine div

J'ai un div structure comme le fond:

<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 la liste dans le corps-classe de contenu et assurez-vous qu'il ne s'applique pas à quoi que ce soit à l'intérieur du col-moyen

Je pensais que ce serait quelque chose comme...

.body-content li { }

mais il s'applique à ces styles pour les éléments de la liste à l'intérieur du col-milieu trop.

InformationsquelleAutor Brad | 2009-10-06

css html

5

La plus simple et la plus compatible option est:
```
div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }
```
Vous pourriez être en mesure d'utiliser le sélecteur d'enfant:
```
div.body-content > ul li
```
mais il n'est pas pris en charge dans IE6.

Autre que cela, cela dépend exactement comment votre balisage est écrit et ce que vos exigences à l'égard de prise en charge du navigateur sont.

Si possible, changez votre balisage pour:
```
<div class="body-content">
  <div class="col-middle">
  ...
  </div>
  <div class="col-other">
  ...
  </div>
</div>
```
ou quelque chose de similaire, de sorte que vous pouvez facilement faire la distinction entre la liste que vous voulez de style.

InformationsquelleAutor cletus
1

Que je ne puis remettre à ZÉRO l' .corps de contenu .col moyen-li { }'s
APRÈS la coiffure la .corps-contenu li { }'s

Votre seule autre option est de spécifier l'emplacement de la batterie au lithium va être:
```
.body-content .li-block li { }
```
- Il n'importe pas si c'est depuis qu'il est plus spécifique.
InformationsquelleAutor Jakub
0

Le code que vous avez essayé spécifie comment les éléments de la liste qu'à l'intérieur .corps-le contenu doit regarder, même si elles sont à l'intérieur .col-milieu.

À l'aide de CSS2 il n'y a pas moyen de faire ce que vous voulez, en dehors de la spécification de la façon dont les éléments de la liste à l'extérieur .col-milieu doit travailler, puis de spécifier la façon dont ils devraient être de style à l'intérieur .col-milieu.

À l'aide de CSS3 cependant, vous pouvez faire quelque chose comme ceci:
```
:not(.col-middle) li{}
```
Notez que cela ne fonctionne pas dans tous les navigateurs IE.

InformationsquelleAutor Marius
0

Vous avez besoin:
```
.body-content > ul li { ... }
```
Cela permettra de sélectionner uniquement les éléments de la liste qui sont les descendants directs d'un ul dans .body-content.

Edit: Oups, mauvaise place de la > !

Edit: Désolé, devrait également avoir mentionné l'enfant sélecteurs ne fonctionnent pas dans IE6.
- "enfant sélecteurs ne fonctionnent pas dans IE6" - pas plus que l'internet.
- Haha avec vous... 🙂
InformationsquelleAutor Mark Bell
0

Vous devez utiliser, qui va mettre le style que pour le fils de li de .corps-contenu
```
.body-content > ul li {}
```
InformationsquelleAutor yogsototh
0

Relooker un col-milieu.
```
div.body-content li {
  color: red;
}

div.col-middle li {
  //overrides stuff
  color: black;
}
```
Styles en cascade vers le bas à partir des éléments parents à leurs enfants.

InformationsquelleAutor Ryan Florence

L'exemple ci-dessous semble fonctionner le mieux (j'ai ajouté un peu plus de balisage à démontrer), mais je recommande de style .body-content puis remplacer ces styles dans .col-middle. Il 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>

InformationsquelleAutor Ionuț G. Stan

Vous devez vous connecter pour publier un commentaire.