nth-of(): avant la compatibilité avec Edge et Safari

Question

J'ai actuellement un problème avec Google Chrome et Internet Explorer, mais pas avec Safari et Microsoft Edge, pour une raison ou une autre dans ces deux styles. t étant appliqué.

.legend-content ul li:nth-of-type(1):before{ 
color: #00b36a; 
} 
.legend-content ul li:nth-child(2):before{ 
    color: #ff9600; 
} 
.legend-content ul li:nth-child(3):before{ 
    color: #00ade5; 
} 
.legend-content ul li:nth-child(4):before{ 
    color: #d3cfd0; 
} 

On Edge the stlye isn't being applied, mais Chrome a tout à fait bien.

J'ai essayé de regarder autour mais n'ai pas trouvé de problèmes de compatibilité avec ces navigateurs (et je ne vois pas pourquoi Edge échouerait mais IE ne le ferait pas). Alors, comment puis-je obtenir un résultat comme this dans tous les navigateurs?

Je dois aussi mentionner que les listes ont pas de style et l'élément avant chaque li est:

.legend-content ul li:before{ 
    content: '◼ '; 
    font-size:18px; 
} 

Answer 1

Vous devez toujours utiliser content propriété avec une autre propriété qui est nécessaire si content est pas stocker de texte valeur et color propriété fonctionne lorsque vous mettez du texte dans content:"text" avec tous pseudo css element comme ci-dessous le code et cela fonctionne. S'il vous plaît ajouter ceci et vérifier.

.legend-content ul li:before{ 
    content: "■"; 
    font-size:18px; 
} 
.legend-content ul li:nth-of-type(1):before{ 
    color: #00b36a; 
} 
.legend-content ul li:nth-child(2):before{ 
    color: #ff9600; 
} 
.legend-content ul li:nth-child(3):before{ 
    color: #00ade5; 
} 
.legend-content ul li:nth-child(4):before{ 
    color: #d3cfd0; 
} 

S'il vous plaît voir le lien d'image ci-joint: https://i.stack.imgur.com/k6tmR.png

Answer 2

I am not able to repreoduce the issue, Edge 15 ou 16, bien que je ne dois modifier légèrement pour inclure un bloc de contenu pour rendre

.legend-content ul li:before { 
    content: 'number '; 
} 

La capture d'écran que vous avez affichée est également ce qui se passe lorsque vous avez une règle qui est plus spécifique que cette règle. Il est possible que vous ayez une règle css basée sur le bord spécifique ou modernizr qui soit prioritaire. Une règle non prise en charge ressemble à ce