nth-of(): vor der Kompatibilität mit Edge und Safari

Question

Ich habe derzeit ein Problem, bei dem das Folgende in Google Chrome und Internet Explorer funktioniert, aber nicht auf Safari und Microsoft Edge, aus irgendeinem Grund ist der Stil in diesen beiden nicht Wird angewendet.

.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, aber Chrome hat es ganz gut.

Ich habe versucht, mich umzusehen, aber habe keine Kompatibilitätsprobleme mit diesen Browsern gefunden (und sehe nicht, warum Edge ausfallen würde, IE aber nicht). Also, wie würde ich ein Ergebnis wie this in allen Browsern erhalten?

Ich sollte auch erwähnen, dass die Listen keinen Stil und das Element haben vor jedem li ist:

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

Answer 1

Sie sollten immer content Eigenschaft verwenden, zusammen mit einigen anderen Eigenschaft, die erforderlich ist, wenn content keinen Text speichern Wert und color Eigentum arbeiten, wenn Sie einen Text in content:"text" mit allen pseudo css element wie unter Code setzen und es funktioniert. Bitte fügen Sie dies hinzu und überprüfen Sie.

.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; 
} 

entnehmen Sie bitte der beigefügten Abbildung unten stehenden Link: https://i.stack.imgur.com/k6tmR.png

Answer 2

I am not able to repreoduce the issue, in Edge 15 oder 16, obwohl ich es hatte zu ändern, leicht einen Inhaltsblock schließen

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

zu machen

Der Screenshot, den Sie gepostet haben, passiert auch, wenn Sie eine Regel haben, die spezifischer als diese Regel ist. Es ist möglich, dass Sie eine kantenspezifische oder modernisierungsbasierte CSS-Regel haben, die überschrieben wird. Eine Regel, die nicht unterstützt wird wie folgt aussieht