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: p> Comment pourrais-je accomplir cela en utilisant CSS? P> P>
5 Réponses :
Comme si ceci ... et ainsi de suite ... p> 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. P> Prenez simplement le CSS ci-dessus et modifiez le style de liste code> en fonction de vos besoins. Vous pouvez trouver une liste de types de liste code> style code> ici: http://www.w3schools.com/csrsref/pr_list-style-type.asp P> p>
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.
Il est préférable de donner à chaque élément avec un nom de classe de type balle différent. .disk {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.sq {
list-style-type: square;
}
Ce dont j'ai besoin, cependant, c'est que les balles basculent tout en étant intégrées dans les autres éléments code> li code>.
Vous ne pouvez pas faire ça. Vous devez faire référence à chaque niveau de votre ul code> ou
Li code> 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 .
Vous pouvez utiliser des styles distincts en ajoutant ou vous pouvez ajouter des styles à hors du haut de mon tête, donc il pourrait y avoir des erreurs mineures, mais ces deux exemples devraient essentiellement fonctionner. p> p> class code> ou
ID code> dans les balises code> ul code> suivantes:
ul code> S en fonction de la manière dont ils sont nichés: p>
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: p> avec le code fixe, les solutions ci-dessus fonctionnent. p> p>
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. P>
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.