12
votes

Utilisez CSS pour alterner des styles de points ullulées ultérieures

J'aimerais alterner des propriétés de type de style de liste pour les listes UL, de sorte que l'extérieur est un disque, une liste ultérieure interne est un cercle, d'un cercle supérieur à un disque, et ainsi de suite.

Essentiellement ce que je veux, c'est ceci: xxx

Comment pourrais-je accomplir cela en utilisant CSS?


2 commentaires

Le nombre de niveaux de nidification est-il fixé? Parce que sinon, il sera assez difficile d'accomplir cela avec CSS seul.


Non, je tente de répéter le type de style de liste pour une liste qui peut être aussi longue que possible, cependant, si nécessaire, je peux coder manuellement des niveaux d'indentation, s'il y a une autre solution. Si une solution JavaScript fonctionne également aussi bien.


5 Réponses :


19
votes

Comme si ceci ... xxx

et ainsi de suite ...

Le premier niveau des éléments de liste aura le marqueur de type "cercle". La seconde (incorporée) utilisera des "disques". Le troisième niveau utilisera des carrés.

Prenez simplement le CSS ci-dessus et modifiez le style de liste en fonction de vos besoins. Vous pouvez trouver une liste de types de liste style ici: http://www.w3schools.com/csrsref/pr_list-style-type.asp


1 commentaires

Cela ne fonctionne pas; Vous obtenez deux balles après la première LI, avec mon exemple de code. De plus, vos styles de balle ne continuent pas à répéter le même modèle de style de liste.



2
votes

Il est préférable de donner à chaque élément avec un nom de classe de type balle différent. XXX PRE>

.disk {    
    list-style-type: disc;
}
.circle {
    list-style-type: circle;
}
.sq {
    list-style-type: square;
}


6 commentaires

Ce dont j'ai besoin, cependant, c'est que les balles basculent tout en étant intégrées dans les autres éléments li .


Vous ne pouvez pas faire ça. Vous devez faire référence à chaque niveau de votre ul ou Li avec un nom de classe. Sinon, vous aurez des balles doubles ou triples en fonction de la profondeur de votre arbre.


Est-il possible d'utiliser des sélecteurs CSS3 pour les navigateurs qui les supportent et utilisent des identifiants pour les navigateurs qui ne les soutiennent pas?


C'est redondant, aucune raison d'utiliser CSS3 si vous utilisez des identifiants.


Serait-il possible en utilisant PHP ou JavaScript pour générer automatiquement des listes avec les identifiants corrects?


Downvoted - vous ne doit pas nommer les styles CSS en fonction de l'apparence visuelle .



4
votes

Vous pouvez utiliser des styles distincts en ajoutant class ou ID dans les balises ul suivantes: XXX PRE> Xxx

ou vous pouvez ajouter des styles à ul S en fonction de la manière dont ils sont nichés: xxx

hors du haut de mon tête, donc il pourrait y avoir des erreurs mineures, mais ces deux exemples devraient essentiellement fonctionner.


0 commentaires

0
votes

J'ai trouvé la raison pour laquelle je reçois des doubles balles. Mes listes ne sont pas sémantiquement correctes, elles créent donc de multiples balles.

Il s'agit du bon HTML: xxx

avec le code fixe, les solutions ci-dessus fonctionnent.


0 commentaires

0
votes

La réponse simple à celle-ci est non, elle ne peut pas être accomplie par CSS de manière cohérente.

Vous pouvez écrire du JavaScript pour analyser la page et maintenir essentiellement une pile d'ULS, mais ce serait une sorte de bâclé et piraqué. Ce serait quelque chose comme ça. xxx


0 commentaires